jQuery UI仿淘宝搜索下拉列表功能

jquery仿淘宝搜索下拉列表实现效果如下：

网上搜索教程：

！doctype html html lang=' en ' head meta charset=' utf-8 '/title jquery UI自动完成-Default功能/title link rel='样式表href=' http://代码。jquery。com/UI/1。10 .3/主题/流畅/jquery-UI。CSS '/脚本src=' http :3http://代码。jquery。com/jquery-1。9 .1 .js '/script script src=' http 33366高、“ColdFusion”、“Erlang”、“Fortran”、“Groovy”、“Haskell”、“Java”、“JavaScript”、“Lisp”、“Per”高l '，' PHP '，' Python '，' Ruby '，' Scala '，' Sche高' ];$('#tags1 ').自动完成({ source :可用标签})；$('#tags2 ').自动完成({ source: ['a '，' b '，' c ']})；//页面加载$('#tags3 ').自动完成({ source : datasource 1()})；//数据库$('#tags4 ').自动完成({ source:函数(请求，响应){ var name=$。ui。自动完成。转义正则表达式(请求。术语))；回应($。grep(datasource 2(name)，function(item){ return item；}) );} });//利用创建交互式、快速动态网页应用的网页开发技术页面加载就获取到数据源函数数据源1(){ var my cars=new Array()(对于var I=0；i 100i ) { mycars[i]='高我；};归还我的汽车；} //利用创建交互式、快速动态网页应用的网页开发技术根据输入的到数据库查找相当于函数数据源2(名称){ var my cars=new Array()for(var I=0；i 100I){我的车[I]=name ' _ ' I；};归还我的汽车；} });/script/head body div class=' ui-widget ' label for=' tags ' tags 3360/label input id=' tags 1 '/input id=' tags 2 '/input id=' tags 3 '/input id=' tags 4 '/div/body/html使用第四种方法（标签4)实现：

注意：1.要开启创建交互式、快速动态网页应用的网页开发技术的同步（真实异步，假的同步),即：async:false，2 .声明和返回的集合要写在$.ajax({})之外！3.导包

链接rel='样式表href=' http://代码。jquery。com/ui/1。10 .3/主题/平滑/jquery-ui。CSS '/脚本src=' http :http://代码。jquery。com/jquery-1。9 .1 .js '/script script src=' http 3360http://代码。jquery。com/ui/1。10 .3/jquery-ui。js '/脚本

代码如下：

脚本类型='text/javascript' $('#querys ').自动完成({ source:函数(请求，响应){ var name=$。ui。自动完成。转义正则表达式(请求。术语))；回应($。grep(DataSouce(name)，function(item){ return item；}) );} });函数DataSouce(name){ var querylist=new Array()；$.ajax({ type: 'get '、data:{q:name}、url:'query '、dataType:'json '、内容类型： ' application/JSON '、async:false、success :函数(data){ $(data。数据。搜索pojolist ).每个（函数(I){ querylist[I]=数据。数据。搜索pojolist[I].goodsName}) })返回querylist}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。