jquery ui 插件之autocomplete

jquery ui 的autocomplete组件可以到jquery ui官网去下载：http://jqueryui.com/download/#!

可以只勾选自己需要的组件，jquery ui会自动的把依赖也给你选择上，这叫做"定制下载",下载下来就可以使用autocomplete插件了。

下面是一个例子，完成的功能如下：

输入可以自动完成（这自然是基本功能）
点击输入框会让自动完成框显现出来

下面是效果图：

jquery ui 插件之autocomplete

涉及到的html：

<form class="form-inline">
					  <div class="form-group">
					    <label for="queryName"><i class="nec">*</i>公司选择</label>
					    <input type="text"  style="width:200px;margin-left:8px;"
					    class="form-control input-sm" id="companyCombo" name="companyCombo">
					  </div>
				</form>

js代码：

var srcArr = [];
	//获取下拉框的数据源
	$.ajax({
		type:"post",
		url:"af_getAllCompanies",
	    success:function(data){
	    	$.each(data,function(i,obj){
	    		var item={};
	    		item["label"]=obj["name"];
	    		item["aaaa_id"]=obj["aaaa_id"];
	    		srcArr.push(item);
	    	});
	    	//定义自动完成
	    	  $("#companyCombo").autocomplete({
	    		  minLength: 0,
                  source: srcArr,
                  select: function(event, ui){
                      $(this).val(ui.item.label)  ;
                      loadData(ui.item.aaaa_id);
                      event.preventDefault();     
                  },
                  change:function(event, ui){
                    
                  }
               });
	    }
	});
	//点击触发自动完成
      $("#companyCombo").focus(function () {
          $("#companyCombo").autocomplete("search");
      });

注意：要想点击输入框就出现autocomplete组件，需要设置autocomplete组件的属性：minLength: 0，表示不输入就可以显示autocomplete，另外还要设置输入框获取焦点事件：

$("#companyCombo").focus(function () {

$("#companyCombo").autocomplete("search");

});

srcArr(autocomplete的数据源)格式可以是字符串数组:[ "Choice1", "Choice2" ],也可以是对象数组，格式如上面代码中的那种：

[{label:xxx,aaa_id:xxxx}。。。],其中label是显示id文字，必须要有这儿名字的属性，其他属性都可以自己定义，然后在事件中可以通过ui.item取到属性。

jquery ui 插件之autocomplete

相关推荐