jquery autocomplete

最新推荐文章于 2017-07-02 17:51:03 发布

程缘

最新推荐文章于 2017-07-02 17:51:03 发布

阅读量310

点赞数

分类专栏：技术文章标签： autocomplete jquery

本文链接：https://blog.csdn.net/scott444/article/details/47445189

版权

技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需要引入

/jquery-ui-1.9.2.custom.min.css

jquery-1.8.3.js

jquery-ui-1.9.2.custom.min.js

var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC",
"C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
"Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
"Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
$("#auto").autocomplete({
source:availableTags ,
delay: 300,
select: function(event, ui) {
$("#auto").html(ui.item.value);
}
});
});
</script>
</head>
<body>
<input type="text" id="auto" /> <br/>
</body>
</html>

这是一个简单的例子

如果数据想从数据库里取的话

只需要改变 source 红字部分

source:function(request, response) {
$.ajax({
url: 访问数据的地址,
data: {
name: request.term 这个是输入框输入的值
},
dataType: "json",
success: function(data) {
if (data != null) {
response($.map(data, function(item) { //这里是吧返回的数据根据return的规则进行格式化
return {
key: item,
value: item
}
}));
}else
{
return response(""); //这个就是当没有结果时就清除弹出层的内容
}
}
});
},

程缘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery autocomplete

需要引入/jquery-ui-1.9.2.custom.min.cssjquery-1.8.3.jsjquery-ui-1.9.2.custom.min.js$(function() {var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC","C", "C++", "Cloj
复制链接

扫一扫

专栏目录