ajax结合jQuery autocomplete 实现类似百度搜索一样的输入联想

<script src="/wdtime/scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/wdtime/scripts/jquery.autocomplete.js"></script>
<link rel="Stylesheet" href="/wdtime/styles/jquery.autocomplete.css" />
	
	<script type="text/javascript"> 
     var json = getjson();
     var pfid ;
     function getjson() {  
			 	 var result;
			     $.ajax( { 
                        type : "GET",
                        async: false,
                        url : "/wdtime/pages/Pfpingji/getJson.do", 
                        data : "", 
                        dataType: "json", 
                        success : function(msg) { 
                           result = msg;
                        } 
                    });  
                  return result;
	          }
	          $(function() {
                 $('#pfname').autocomplete(json, {
                    minChars: 0,//自动完成激活之前填入的最小字符
	                max:12,//列表条目数
	                cacheLength : 12, //缓存12条数据
	                width: 150,//提示的宽度
	                matchSubset:true,//是否使用服务器查询的缓存
	                scrollHeight: 300,//提示的高度
	                matchContains: true,//是否只要包含文本框里的就可以
	                autoFill:false,//自动填充
		            formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
						
						return data.to ;
		            },
		            formatMatch: function(data, i, max) {//配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据
							
							return data.name + data.to;
		            },
	            formatResult: function(data) {//定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据
						
						return data.to;
	            }
		        }).result(function(event,data,formatted){
		        		return data.name;
		        });
	           })
	           function inputClick(){
	           		var input = $("#pfname").val();
	           		$.each(json,function(idx,item){
	           			var str = item.to;
	           			if(input==str){
	           				$("#pfId").val(item.name);
	           			}
            		})
	           }
	           
</script> 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值