前端input框结合[chosenJquery]下拉框可输入可搜索

 input框结合[chosenJquery]下拉框可输入可搜索

       【html:】
        .....
        <td style="38%;text-align: left;padding-top: 13px;">
            <input type="text" name="COLLECTION_NAME" id="COLLECTION_NAME" value="${pd.COLLECTION_NAME}"  onblur="codeByName()" maxlength="50" placeholder="这里输入用例集名称" title="用例集名称" style="98%;"/>
            <input type="hidden" id="COLLECTION_ID" value=""/>
        </td>
        .....
        
        
        【js：】
        var arrayList;
        //用例集名称输入框智能搜索(加载页面时ajax获取下拉列表数据，然后获取焦点时显示列表[一次加载多次使用])        
        $(function() {
             var availableTags = [];
                 $.ajax({
                        type: "POST",
                        url: '<%=basePath%>cases/getCollectionName.do',
                        data: {},
                        dataType:'json',
                        cache: false,
                        success: function(data){
                            if("success" != data.result){
                                alert("出错啦，请与管理员联系！");
                                return false;
                             }else{
                                    //availableTags = data.jsonArray;
                                    $.each(data.jsonArray,function(index,jsonArrayList){
                                        arrayList = data.jsonArray;
                                        var strval = {label:jsonArrayList.COLLECTION_NAME,value:jsonArrayList.COLLECTION_NAME,id:jsonArrayList.COLLECTION_ID,code:jsonArrayList.COLLECTION_CODE};
                                        availableTags.push(strval);
                                    });
                                }        
                            }
                });
                   //定义下拉框列表        
                $("#COLLECTION_NAME").autocomplete({
                        minChars:0,
                        minLength: 0,
                        autoFill:true,
                        matchContains:true,
                        mustMatch:true,
                        matchSubset:true,
                        cacheLength:20,
                        source:availableTags,
                        /* function(request,response){
                                response($.map(availableTags,function(item){
                                    return {
                                            label:item.label,//下拉框显示值
                                            value:item.value,//选中后，填充到下拉框的值
                                            id:item.id,//选中后，填充到id里面的值
                                            code:item.code//选中后，填充到code里面的值    
                                    }
                                }));
                        }, */
                        select : function(event, ui) {
                                $(this).value = ui.item.label;
                                $("#COLLECTION_NAME").val(ui.item.value);
                                $("#COLLECTION_ID").val(ui.item.id);
                                $("#COLLECTION_CODE").val(ui.item.code);
                                //event.preventDefault();//阻止事件默认行为，防止输入框默认取ui.item.value
                                return false;
                        }
                        
                }).focus(function(){
                             $(this).autocomplete("search");
                                 return false;
                                 
                            });
                
          });
          
          //在input输入框按backspace(退格键)时清空valu值
          $(document).bind("keydown",function(e){
               e = e ? e : event;   
                 if(e.keyCode == 8){
                     var target=$.event.fix(e).target;
                     if($(target).attr("id") == "COLLECTION_NAME"){
                            $(target).val("");
                            forbidBackSpace(e);
                     }
                 }
         });
          
          //清空只读文本框中的用例集编号
        function forbidBackSpace(e) {
            var ev = e || window.event; //获取event对象
            var obj = ev.target || ev.srcElement; //获取事件源
            var t = obj.type || obj.getAttribute('type'); //获取事件源类型
            //获取作为判断条件的事件类型
            var vReadOnly = obj.readOnly;
            var vDisabled = obj.disabled;
            //处理undefined值情况
            vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
            vDisabled = (vDisabled == undefined) ? true : vDisabled;
            
            //当敲Backspace键时，事件源类型为密码、多行文本的，则退格键失效
            var flag2 = ev.keyCode == 8 && t != "password" && t == "text"
                    && t != "textarea";
            //判断
            if (flag2) {
                var startIsFocus = $("#COLLECTION_CODE").is(":focus");
                if (false == startIsFocus) {
                    $("#COLLECTION_CODE").val("");
                }
                return event.returnValue = false;
            };
        }
        //禁止后退键 作用于Firefox、Opera
        document.onkeypress = forbidBackSpace;
        //禁止后退键  作用于IE、Chrome
        document.onkeydown = forbidBackSpace;
          
          //手动填入用例集名称联动用例集合编号
          function codeByName(){
              $.each(arrayList,function(index,arrayList){
                if(arrayList.COLLECTION_NAME == $("#COLLECTION_NAME").val()){
                     $("#COLLECTION_CODE").val(arrayList.COLLECTION_CODE);
                     $("#COLLECTION_ID").val(arrayList.COLLECTION_ID);
                }
                             
            });
          }