jQuery UI仿淘宝搜索下拉列表功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery UI仿淘宝搜索下拉列表功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2615字，纯文字阅读大概需要4分钟。
内容图文
jquery仿淘宝搜索下拉列表实现效果如下：
网上搜索教程：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL高",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Per高l",
"PHP",
"Python",
"Ruby",
"Scala",
"Sche高"
];
$( "#tags1" ).autocomplete({
source: availableTags
});
$("#tags2").autocomplete({
source: ["a", "b", "c"]
});
//页面加载
$("#tags3").autocomplete({
source: DataSouce1()
});
//数据库
$("#tags4").autocomplete({
source: function( request, response ) {
var name=$.ui.autocomplete.escapeRegex( request.term );
response( $.grep( DataSouce2(name), function( item ){
return item;
}) );
}
});
//利用ajax页面加载就获取到数据源
function DataSouce1()
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]="高"+i;
};
return mycars;
}
//利用ajax根据输入的到数据库查找 相当于
function DataSouce2(name)
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=name+"_"+i;
};
return mycars;
}
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags1" />
<input id="tags2" />
<input id="tags3" />
<input id="tags4" />
</div>
</body>
</html>
使用第四种方法（tags4）实现：
注意：
1.要开启ajax的同步（true异步，false同步），即：async:false,
2.声明和返回的集合要写在 $.ajax({})之外！
3.导包
<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
代码如下：
<script type="text/javascript">
$("#querys").autocomplete({
source: function( request, response ) {
var name=$.ui.autocomplete.escapeRegex( request.term );
response( $.grep( DataSouce(name), function( item ){
return item;
}) );
}
});
function DataSouce(name)
{
var querylist=new Array();
$.ajax({
type: "get",
data:{q:name},
url:"query",
dataType:'json',
contentType: "application/json",
async:false,
success:function(data){
$(data.data.searchPOJOList).each(function(i){
querylist[i]=data.data.searchPOJOList[i].goodsName;
})
}
})
return querylist;
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的jQuery UI仿淘宝搜索下拉列表功能全部内容，希望文章能够帮你解决jQuery UI仿淘宝搜索下拉列表功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。