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 ...
随机推荐
- 模型构建<3>:交叉验证
交叉验证是模型比较选择的一种常用方法,本文对此进行总结梳理. 1.交叉验证的基本思想 交叉验证(cross validation)的基本思想就是重复地利用同一份数据. 2.交叉验证的作用 1)通过划分 ...
- [PE484]Arithmetic Derivative
题意:对整数定义求导因子$'$:$p'=1,(ab)'=a'b+ab'$,求$\sum\limits_{i=2}^n(i,i')$ 这个求导定义得比较妙:$(p^e)'=ep^{e-1}$ 推一下就可 ...
- SQL SERVER中获取表间主外键关系
sql server 2008中的主外键关系获取方式: 转自:http://www.cnblogs.com/ke10/archive/2012/06/11/2544655.html SELECT OB ...
- 拆分Cocos2dx 渲染项目 总结
因为只拆分了渲染的内容,所以代码只针对渲染部分进行分析. 代码涉及到这些类: CCImage,对图片的数据进行操作 CCNode,CCSprite,结点类 CCProgram,CCRenderer,C ...
- Date与String间的转换
一.Date-->String :格式化过程 1. DateFormat :String format(Date d) 2.SimpleDateFormat是继承DateFormat(抽象类)的 ...
- sql prompt5安装好了，也破解完成了，然后到SQL里面还是没有提示是为什么？
勾上这个,祝你成功!
- 图之Dijkstra算法
Dijkstra算法是一种求单源最短路的算法,即从一个点开始到所有其他点的最短路.其步骤如下: c语言实现如下:(使用邻接矩阵存储) #include <stdio.h> #include ...
- 盘点Linux内核源码中使用宏定义的若干技巧（1）
http://blog.chinaunix.net/uid-23769728-id-3141515.html
- How to Find Processlist Thread id in gdb !!!!!GDB 使用
https://mysqlentomologist.blogspot.jp/2017/07/ Saturday, July 29, 2017 How to Find Process ...
- StringBuilder和StringBuffer解析（百度面试题优化须要用到的）
StringBuilder是java5及以后提供的API,它不是线程安全的,而StringBuffer是java1.4曾经的API,它是线程安全的,所以说StringBuilder的效率更高一些,今天 ...