support AngularJS Mult & Single Auto-Complete - 快车库

Requirement

基于AngularJS UI Bootstrap，支持用户可以多选择与单选择功能。

其它前提细节:

至少输入三个
去重
支持用户键盘Enter回车选中
当用户对Input框失去焦点的时候
处理用户Ctrl+C/V的操作

扩展：
大部分的auto-complete都有一种现象，就是异步请求加载的数据响应速度不能很好的控制，出现时间差。
即网络差或者返回的数据量大或者user快速输入的时候，三个关键字的异步请求回来的时间比用户输入的第四个关键字的响应时间还慢。

例如上图显示
用户输入的USC的timeline时间(绿色部分)比输入USCHS的时间还长.

Web Presentation

先分两个模块，后续会统一
(1)单选择

(2)多选择(以逗号隔开)

Technology & Business preparation

(1)AngularJS
https://code.angularjs.org/1....
(2)UI Bootstrap 之 ui.bootstrap.typeahead
https://angular-ui.github.io/...
(3)Vessel auto-complete
support用户通过Vessel Name、VesselGID、IMO 还有MMSI进行 auto-complete

Tip:以上资料都需要翻墙，需要学习AngularJS的server这个服务

Common Server

var opnApp = angular.module("opnApp", ["ui.router", "ngResource", "ngSanitize", "angular-loading-bar",  "ui.bootstrap"]);

创建一个server，用于返回从后台服务器的数据。两种访问路径，一种是key的post请求，另一种是urlkey的get请求。

Mutl Auto-Complete

Html:

uib-typeahead : 用于遍历对象属性
typeahead-input-formatter : 在选择之后格式化ng-model的显示
当选中某条vessel触发事件顺序：blur -> formatter -> blur

JS:(后面会重构)

Single Auto-Complete

(会再重构)
HTML:

JS:

扩展-解决异步

解决方案：
加个当前请求时间的flag标记，下面代码展示的是另外一个项目使用JqueryUI开发的时候所解决的该问题。上面Angualr Js还没有加该逻辑判断，等用户的feedback再处理。

var search_port_time_flag=null;
        $("#queryPortUnlocode").autocomplete({
             source: function(request, response) {
                 var time_flag=new Date();
                 $.ajax({
                     url: "http://"+ isp_host+ "/PortController?keyWord="+request.term,
                     success: function(data) {
                         if(data[0]=='error.network.issue'){
                               $("#queryResultMsg").html("<p>Port Auto-Complete Network Error, please retry or contact DEV Team</p>");
                               data=[];
                           }
                         if(search_port_time_flag==null || time_flag >= search_port_time_flag){
                             search_port_store=data;
                             search_port_time_flag=time_flag;
                         }
                         response($.map(data.slice(0,10), function(item) {
                             return { label: item.unlocode+' - '+item.portName, value: item.unlocode };
                         }));
                     }
                 });
             },
             minLength: 3, 
             autoFocus: false, 
             delay: 30 
        });

$("#queryPortUnlocode").on('blur',function(){
              var uiVal=$("#queryPortUnlocode").val();
                var flag=true;
                $.each(search_port_store,function(){
                    if(this.unlocode==uiVal){
                        flag=false;
                        return false;
                    }
                });
                if(flag){
                    $("#queryPortUnlocode").val(null);
                }
        });

结尾

晚点会上传上面的代码实例