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

前端之家收集整理的这篇文章主要介绍了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,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> 
原文链接:https://www.f2er.com/ajax/163848.html

猜你在找的Ajax相关文章