select实现输入模糊匹配与选择双重功能

 1 　　　　　　　　　　　　　　<div class="navbar-form navbar-left" role="search" id="schoolConfig">
 3                             <span class=‘form-group-addon‘ style="font-size:16px;">选择学校：</span>
 4                             <div class="form-group" id="schoolQuery"  style="position:relative;">
 5                               <span style="margin-left:100px;width:18px;overflow:hidden;">
 6                                     <select id="schoolId"  style="width:118px;margin-left:-100px" onchange="setValue(this)"></select>
 7                                 </span>
 8                                 <input id="schoolName" class="form-control" placeholder="学校名称" style="width:100px;position:absolute;left:0px;top:0px;height:30px;" onblur="reLoadSection()">
 9                             </div>
10                         </div>

 1 /**
 2  * 将select的值放入input框
 3  */
 4 function setValue(obj){
 5     var index = obj.selectedIndex; // 选中索引
 6     var value = obj.options[index].value; // 选中值
 7     var schoolName = obj.options[index].text; // 选中文本
 8     $(‘#schoolName‘).val(schoolName);11 }

1  $.getJSON(//获取学校数据
2               ‘/test/manage/user/school_findAllName.action‘,
3                 function(data){
4                    $( "#schoolName" ).autocomplete({
5                          source: data
6                         });
7                     }
8                 );
9             initCombo($(‘#schoolId‘),‘/test/manage/user/school_findAllIdAndSchoolName.action‘,‘schoolId‘,‘schoolName‘);

 1 /**
 2  * init combobox
 3  * @return {} 
 4  */
 5 function initCombo(combo,url,valueField,displayField){
 6     $.getJSON(
 7         url,
 8         function(data){
 9             if(data.rows && data.rows.length>0){
10                 var html = ‘<option></option>‘,
11                     rows = data.rows,
12                     len = rows.length;
13                 
14                 for(var i=0; i<len; i++)
15                     html += "<option value=‘"+ rows[i][valueField] + "‘>"+ rows[i][displayField] +"</option>";
16                 combo.html(html);
17             }
18         }
19     );
20 }