javascript--自动填充 与 多选级联

需求背景：在后台进行活动等业务信息查询时，都是需要手动输入全部的信息。想要一个可以实现自动联想的输入框，在输入时，即可看到后端返回的数据，再进行选择性的输入。

选择过程：

1、首先想到的是combobox，理由：以前了解过，实现效果如下：

不过在看使用示例后，不足之处：需要引入新的js文件(jquery-easy-UI)，使用起来略复杂（省事才是王道）。

2、multiValueSearchInput。这个目前在系统里面有现成的使用案例，效果还可以。

不过在看了源码后，不足之处：源码复杂，想要把页面上的查询条件传递到后端，看了半天，还是没看明白，而目前已有的案例是仅根据输入的值进行模糊匹配查询，而我需求则是要求将form表单内的数据均作为查询 条件传递到后端进行查询。

3、在看multiValueSearchInput源码过程中，发现了一个插件，autoComplete，这个是jquery内嵌的一个自动填充效果，效果如下：

而且在网上看了一下，如果要用这个插件，也无需引入额外的文件，用jquery和jquery-ui这个两个即可。
不足之处：当结果较多时，没有滚动条；
优胜之处：实现简单，后端代码无需开发新接口，仅需新加controller代码，在client端新加service调用原server端代码即可；

实现过程：

选定了方案，那么实现起来就比较顺畅。

1、先引入js

<script src="${ctx}/static/scripts/autoComplete/jquery-1.11.3.js">script>
<script src="${ctx}/static/scripts/autoComplete/jquery-ui.js">script>

2、js内新增function

function initAutoComplete(jason){
   $("#name").autocomplete(jason,{
      source: jason,
   });
}

3、js新增如下代码：

$(document).ready(function(){
   $("#name").focus(function () {
      $.post("${ctx}/activity/findActivityNameList",
            {page : currentPage,
            rows : recordsPerPage,
            type : $("#activityType").val(),
            name : $("#name").val(),
createTimeEnd :$("#createTimeEnd").val()},
function(data){
         initAutoComplete(data);
      },"json");
   });
});

(csdn把代码格式弄混乱了)

简要分析：

首先需要将3的js代码简化：

$(document).ready(function(){
    $("#name").focus(
           function () {url,param,function(data){},"json");
   });

 当页面加载完成后，当id为name的对象被点击或者输入的时候，触发focus动作(api)。
 然后就会向url发送post请求，参数为param，成功后，则会返回data。
 随后在内部function做处理，最后的json指返回的数据为json格式。
 同时，param的格式也必须为类似于json格式的(如例，后端有对应的对象接收这些参数)。

在这，内部function采用initAutoComplete进行接收处理。

这个地方有一点注意的就是，这样做，如果存在重复数据，需要在后端做去重操作，我用的是hashset去重的。

最后说下做的不好的地方，挑选方案耗费时间较长，不过最后实现起来较快，原以为需要花费2d才能开发完，实际上开发+自测只花了4个小事就完工。

---

以上为js自动填充，下面为cs多选级联。目前在系统里面用的比较多的多选插件为bootstrap，仅需引入js及css文件。
实现效果：

20160229更新：
经过长时间的使用，这个插件在这种简单的场景使用效果还可以。
不过唯一的毛病就是引入的js可能会和原有的js文件冲突，这种情况要尤其注意。