jquery 搜索自动提示(autocomplete插件用法)

1.用autocomplete插件前要加载，(js文件和css样式文件)两个文件

<script src="/javascripts/jquery-ui-1.8.14.custom.min.js" language="javascript"></script>

<link href="/stylesheets/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/>

 

 

2.如果不用与数据库链接，则直接写如下代码：

 

$(document).ready(function(){

   var array_tags=['iphone','ipad','nok','moto'];
   $("#tj_tags").autocomplete({
	    source: array_tags  //source中添加的是一组数组
   });

});

 

 

 

3.如果要从数据库中取数据，则就要添加ajax请求，代码如下：

//这段代码，在下拉框中实现你想要出现的效果
//item：表示每一行的一个值
//ul：不用管它直接写上就可以了（它代表你每一行要添加到哪里的div或其它）
$(document).ready(function(){

$.ui.autocomplete.prototype._renderItem = function (ul, item) { 
            return $("<li></li>") 
                    .data("item.autocomplete", item) 
                    .append("<a>" + item.label + "<span style='float:right;'>约<font style='color:#f50;'>"+item.amount+"</font>件产品</span></a>") 
                    .appendTo(ul); 
    }; 

	//这里的ajax返回类型可以随自己定义，本代码后台把字符串传给前台，
	$("#tj_tags").autocomplete({
	    source: function(request, response){
			$.ajax({
				url: "/w/find_related_records",
				type: "GET",
				data: { 
				   keyword : $('#tj_tags').val() 
				},
				success:function(xml_data){
					var tj_array=xml_data.split("_");  //代码是通过"_"分割
					response($.map(tj_array,function(item){
						return {
							label:item.split("***")[0],    //这里的label与amount与上面代码中用到的密切相关
							amount:item.split("***")[1]
						}
					}));
				}
			});
		},
		minLength: 1    //搜索时，最少1个字符时出结果
	});
});

 

 

3.界面中的代码

<input id="tj_tags" name="q" type="text" autocomplete="off" class="tj_input" value="ip" />

 

 

4.效果图

 

 

评论

3 楼 zyn_zyn 2013-06-01  

智有不明 写道

说明欠佳。没有讲到数据库是怎么操作的。

数据库只是做select like操作，没有必要详细说明吧。
xml_data结果： "名字***数量_名字***数量_名字***数量_..."，这个是当初的写法。
你可以把xml_data改为xml格式，来写

2 楼 智有不明 2013-05-30  

说明欠佳。没有讲到数据库是怎么操作的。

1 楼 chenfei2341 2012-11-23  

似乎太大了些！！！