最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果：

实现这个功能,直接使用了JQuery UI 插件

目前我使用的实现版本是：

网友可以自行下载好js文件,css文件，放在你项目可以访问到位置就可以了。

引入这些文件之后，你就可以复制使用下面的页面来测试(注意引用文件的路径)：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="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;
};
console.log(mycars);
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>

本人使用了测试页面中的 tag3 ,tag4 实现方法,其中的ajax 请求实现的是这样子的:

//利用ajax根据输入的到数据库查找 相当于
function DataSouce2(name)
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=name+"_"+i;
};
console.log(mycars);
return mycars;
/*
var my = new Array();
$.ajax({
url:'supply.php?action=like&name='+name,
type:'get',
dataType:'json',
async:false,
success:function(data){
$.each(data,function(i,item){
my[i] = item.name;
});
}
});
return my;
*/
}

注释部分就是我具体实现ajax请求后,处理json数据,返回一个一维数组(这个过程,我实现得有点郁闷，因为ajax不是经常用,有些设置不清楚,网上找了很久才弄好!要想在success中处理好数据后返回数据,要设置其异步方式为同步方式,就是设置 async:false)

这样子就可以实现所要效果了！

使用Jquery UI 高仿百度搜索下拉列表功能的更多相关文章

  1. jquery ui autocomplete 模拟百度搜索自动提示

    直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  2. 高仿百度传课应用客户端源码iOS版

    高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3  ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎  star  哦 ...

  3. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  4. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  5. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  6. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  7. 仿百度搜索（AJAX）

    <h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...

  8. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  9. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

随机推荐

  1. CLR via C# - GC

    //像背书一样,记录下吧 1.CLR分配资源 托管堆上维护着一个指针NextObjPtr.该指针表示下一个新建对象在托管堆上的位置.C#的new Object会产生IL newobj指令,NextOb ...

  2. ListView加载两种以上不同的布局

    不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...

  3. ext.net中ComboBox空间实现模糊查询

    ComboBox中的属性添加Mode="Local"可以实现第一个字的模糊查询但是搜索中间的字无法实现 现提供一下方法使用正则表达式实现全模糊查询 <ext:ComboBox ...

  4. sql 模糊查询带下划线的字段 _

    1.SELECT * FROM dbo.tb_Test 2.SELECT * FROM dbo.tb_Test WHERE name LIKE '%c_%' 3.SELECT * FROM dbo.t ...

  5. 第四课 Grid Control实验 安装JCH2库并且配置好监听，关键步骤和结果截图

      --从OCM 虚拟机中,克隆了安装oracle之前的状态 配置网络: [root@localhost network-scripts]# ifup ifcfg-eth0 [root@localho ...

  6. WebBrowser如何获取提交的数据

    WebBrowser 其实是对 ActiveX 控件 SHDocVw 的封装,而这个SHDocVw的很多底层调用WebBrowser控件并没有提供实现,你这个应用需要直接操作 SHDoceVw 控件才 ...

  7. 13年山东省赛 The number of steps（概率dp水题）

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud The number of steps Time Limit: 1 Sec  Me ...

  8. imadjust函数分析一

    声明:本文涉及到的行数皆指本文提供的附件imadjust.m的代码中行数 本文只讨论imadjust函数是一种用法,即 J = IMADJUST(I,[LOW_IN; HIGH_IN],[LOW_OU ...

  9. Fatal error: Undefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY' in D:\inetpub\vhosts\zenpty.com\httpdocs\includes\database

    打开php.ini配置文件,找到php_pdo_mysql.dll,如果前面有分号";"则表示该行被注释掉了,将分号去掉,保存,然后重启apache服务,重新访问页面,问题解决了.

  10. 关于阿里云ESC上go语言项目编译6l: running gcc failed: Cannot allocate memory

    (1)前段时间将自己的阿里云服务器上的系统由centos 6.5换为了ubuntu 14,其他的硬件配置都没有发生改变,将服务器上的数据恢复并且重新安装了golang的编译环境后,发现使用go bui ...