input联想输入 jquery.autocomplete.js

jquery.autocomplete.js可以实现input联想输入

如以下截图

1、引入jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>

2、引入jquery.autocomplete.js

<script type="text/javascript" src="../js/common/jquery.autocomplete.js" ></script>

3、代码

/*input联想输入*/
function initAutoComplete(json){
        $("#coupcode").autocomplete(json , {
            minChars:1,
            width:'100%',
            dataType:"json",
            matchContains: true,
            formatItem: function(row, i, max) {
                 return row.bisname;
            },
            formatMatch: function(row, i, max) {
                 return row.bisname;
            },
            formatResult: function(row) {
                 return row.bisname;
            }
        });
}

4、监听事件

$(function() {
   /*联想输入*/
    $("#coupcode").focus(function(){
            $.post(NET.getBisList,{
            	    'city': city,
	                'districtid': districtid,
	                'cont': 10,
	                'page': page,
	                'lon': lon,
	                'lat': lat,
	                'distance': distance
            },function(data){
              //这里的data.msg 是你json那个列表 这里把列表传过去 不然显示不出来
                initAutoComplete(data.msg);
            },"json");
    });
});

jquery.autocomplete.js实现联想输入就这么简单