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.效果图
- 大小: 22 KB
分享到:
相关推荐
Jquery autocomplete插件使用
最近刚开始学jquery,想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用jquery autocomplete插件。
项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能。 autocomplete官网 : ...
主要介绍了jQuery autoComplete插件两种使用方式及动态改变参数值的方法,结合实例形式分析了jQuery自动匹配插件autoComplete的使用技巧与动态改变参数传入值的实现方法,需要的朋友可以参考下
今天小编就为大家分享一篇关于Jquery的autocomplete插件用法及参数讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件)。 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果。1. 创建 ...
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
主要介绍了jquery插件autocomplete用法,结合实例形式分析了jQuery插件autocomplete与后台交互实现搜索的自动完成功能实现技巧,需要的朋友可以参考下
在Rails 4中使用jQuery自动完成的一种简单方法。 同时支持ActiveRecord, 和 。 与和 在你开始之前 在继续之前,请确保您的项目正在使用jQuery-UI和自动完成小部件。 您可以在此处找到有关此信息的更多信息: 我...
jQuery-autocomplete 介绍 jQuery联想词插件 使用 // 方法1 $('#search').autoComplete(optoin) // 方法2 var autoCompleteInstance = new $.autoComplete(selector, optoin) autoCompleteInstance.init() 配置介绍 ...
jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流...
autocomplete插件 notesforlightbox插件 ContextMenu插件 JQZoom放大镜插件 编写一个对象级别的插件 编写一个类级别的插件 uploadify文件上传插件 第8章 使用draggable插件实现对象的拖曳操作 使用droppable...
在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择,换言之,就如同我们用谷歌搜索,或者百度搜索一样,输入一些关键词,会自动提示,这个功能就叫autocomplete....
jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是: (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
将jQuery和smartComplete.js导入您的页面文件,然后使用$("input").smartComplete([OPTION])设置插件。 例如 $ ( "#a" ) . smartComplete ( { url : "result.json" , //url of SERVER ulClass : "abc" } ) ; $ ...