autoComplete实现的输入下拉联想功能

下拉联想 类似与百度的搜索关键词联想功能。用户在输入框中输入关键字后，会出现与其相关的下拉选项供用户选择；从而提高用户体验。

而下拉选项与关键字的匹配关系，根据不同的产品、需求，有不同的实现。如根据热度、相关度、字符匹配度等等。而我在项目中实际用到的是jquery UI的autoComplete 小部件（widgets）来实现。

 

使用方法：引用jquery、jquery UI; $(xx).autocomplete(类似ajax格式的配置项);

关于具体的配置项参考API----http://www.jqueryui.org.cn/api/3746.html

 

 

autoComplete 比较轻量，它的关联过滤匹配是根据字符串匹配的，并且过滤的实现均在前端。所以autoComplete 需要先给前端赋值（无论是本地数据还是远程数据）。这就决定了它只适用与数据量比较小的场景。数据量过大导致关键字匹配卡顿，影响体验。（体现复杂运算在后端的原则）

 

autoComplete 主要是整合了input 与下拉框，下拉的数据源可以是数组、json字符串（返回json的url）、和包含了request、responce处理数据的Function。使用autoComplete 的基本要素为source、select、minLength；具体的demo可以查看上面的地址。代码没有太多技术含量；唯熟API 则耳！

以下为实际项目中的代码：source 选择数据比较稳妥，先在$(function()) 用ajax获取后台数据，构建数组。select配置项用于定义选择选项时的代码处理。

 

var dataAarr = new Array();

               $.ajax({
                      url: "url",
                      dataType: "jsonp",
                      jsonp:'callback',  
                      jsonpCallback:"successCallback",
                         
                      success: function( json ) {
                          var data = eval(json);
                          // alert(data[0].DWMC);
                           for (var i = 0; i < data.length; i++) {
                               dataAarr[i] = data[i].DWMC;
                           }
                      }
                      
                });

               
                $("#tags1").autocomplete({
                  source: dataAarr,
                  select: function( event, ui ) {
                                // alert($("#tags1").val());
                                var l = ui.item.value;
                                // alert(l);
                                $.ajax({
                                    url: "http://127.0.0.1:8080/fuwuguanlixitong/weiXinRuZhuAction/getDanWeiXinXi_Single?DWMC="+l+"",
                                    dataType: "jsonp",
                                    jsonp:'callback',  
                                    jsonpCallback:"successCallback",

                                    success:function(json){
                                        var data = eval(json);
                                       //数据处理代码
                                    }
                                });
                                
                            }
                });

 

 

举一反三：在前端整合了input和select的情况下；利用ajax实现输入下拉联想的功能。思路：事件监听取关键字，后台处理数据返回，前端显示。

把数据过滤放在后端，可以按需过滤数据、匹配数据；增加灵活性同时适用数据量大的场景。