jquery ui autocomplete 模拟百度搜索自动提示
直接上代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>autocompate</title>
<link rel="stylesheet" href="static/themes/default/bootstrap.min.css">
<link rel="stylesheet" href="static/themes/default/jquery.ui.css"> <script src="static/script/jquery.js"></script>
<script src="static/script/jquery.ui.js"></script> </head>
<body>
支持上下箭头选择检索项目。<br>
<input id="keywords" name="keywords" type="text" class="form-control" placeholder="请输入关键字"
style="width:350px;margin:100px 0px 0px 100px"> <script type="text/javascript">
$(document).ready(function () {
var cache = {};
$("#keywords").autocomplete({
minLength: 0,//最小长度触发搜索
delay: 300,//延迟事件来触发
autoFocus: true,//初始化以后自动设置焦点 默认为false
//appendTo:"#someElem",//初始化组件搜索结果appendTo目标元素
//source: words
//source: "static/json_data/search.json",
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
var seachParam={};
if($(this.element).prop("name")){
seachParam[$(this.element).prop("name")]=term;
}else{
seachParam.search_keywords=term;
}
$.ajax({
url: "static/json_data/search.json",
dataType: "json",
data: seachParam,
success: function (data) {
cache[term] = data;
response(cache[term]);
}
});
},
focus: function (event, ui) {
return false;
},
select: function( event, ui ) {
$(this).blur();
}
}).focus(function () {
if ($(this).data("uiAutocomplete") && $(this).data("uiAutocomplete").menu.element)
$(this).data("uiAutocomplete").menu.element.show();
}); }) </script> </body>
</html>
QQ 交流群 ：15129679
jquery ui autocomplete 模拟百度搜索自动提示的更多相关文章
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- 使用Jquery UI 高仿百度搜索下拉列表功能
最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...
- jquery ui autocomplete输入中文不自动完成的问题
因为输入法或浏览器的问题,在输入中文后并没有触发自动完成,要再按多一下键盘才触发,查看发现它是用keydown来实现.bind("keydown.autocomplete", fu ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- 可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
随机推荐
- Git 历险记
Git历险记(一) 作为分布式版本控制系统的重要代表--Git已经为越来越多的人所认识,它相对于我们熟悉的CVS.SVN甚至同时分布式控制系统的Mercurial,有哪些优势和不足呢.这次InfoQ中 ...
- 在MacBook下安装http链接的性能测试工具httping
一.如果没有brew,先安装brew. 安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz ...
- Git_时光机穿梭
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...
- SSM框架搭建问题
环境: 1.eclipse Kepler Service Release 2 2.jdk 1.8 64 3.maven 3.5 4.tomcat 8 问题:
- druid数据源
Druid是一个JDBC组件,它包括三部分: DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系. DruidDataSource 高效可管理的数据库连接池 ...
- C#高性能大容量SOCKET并发(转)
C#高性能大容量SOCKET并发(零):代码结构说明 C#高性能大容量SOCKET并发(一):IOCP完成端口例子介绍 C#高性能大容量SOCKET并发(二):SocketAsyncEventArgs ...
- 使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級
我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如jQuery.Json.NET. EntityFramework.ELMAH.… 等等.各位可 ...
- C#中结构(struct)的部分初始化和完全初始化
假设有这样一个值类型struct. public struct Size { public int Length; public int Width; public int Area() { retu ...
- 报错：具有键"..."的ViewData项属于类型"..."，但它必须属于类型"IEnumerable<SelectListItem>"
报错:具有键"..."的ViewData项属于类型"...",但它必须属于类型"IEnumerable<SelectListItem>&q ...
- Delphi 跨平台 Socket 通讯库
Delphi 跨平台 Socket 通讯库 免费开源的Delphi 跨平台 Socket 通讯库. 源码URL:https://github.com/winddriver/Delphi-Cross-S ...