jquery input 搜索自动补全、typeahead.js
最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑
最后用typeahead.js这个插件,经过自己的测试完美实现
使用方法:在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。
<link href="../js/jquery.typeahead.min.css" rel="stylesheet" />
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/jquery.typeahead.min.js"></script>
html部分代码:
<table border="" cellpadding="" cellspacing="" >
<tr>
<th>
<span class="primary"></span>所属企业:
</th>
<td>
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input class="js-typeahead"
name="q"
type="search"
autofocus
autocomplete="off" placeholder="输入企业名称查找企业" />
</span> </div>
</div> <label id="yixuanze" runat="server"></label> </td>
</tr>
</table>
jquery方法:
$.typeahead({
input: '.js-typeahead',
minLength: ,
order: "asc",
items: ,
dynamic: true,
delay: ,
backdrop: {
"background-color": "#fff"
},
template: function (query, item) {
return '<span class="row">' +
'<span class="username">{{company_name}} </span>' +
'<span class="id">({{person_name}})</span><br/>' +
'<span class="address">{{company_address}} </span></span>'
},
emptyTemplate: "没有找到与 ‘{{query}}’ 相关的数据",
source: {
user: {
display: "company_name",
data: function () {
var deferred = $.Deferred(),
query = this.query;
$.getJSON(
"../Interface/****.ashx", //后台获取数据接口地址,这里我用的是ashx文件
{
dataType: "getcompany",
q: query
},
function (data) {
deferred.resolve(data)
}
)
return deferred;
}
}
},
callback: {
onClick: function (node, a, item, event) {
$("#yixuanze").html("已选择:" + item.company_name); },
onSendRequest: function (node, query) {
console.log('request is sent')
},
onReceiveRequest: function (node, query) {
console.log('request is received')
}
},
debug: true
});
运行效果:
下载:最新盘本请前往官网下载,网盘版本为2.10.4
官方下载地址:http://www.runningcoder.org/jquerytypeahead/demo/
百度网盘下载地址:https://pan.baidu.com/s/1-sFkU2d29qDesB2RIRgk2Q
插件截图
jquery input 搜索自动补全、typeahead.js的更多相关文章
- jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
- [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- 仿Google首页搜索自动补全
仿Google自动补全,实现细节: 后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的) 传输介质:xml 使用jQuery js框架 功能实现: 如果 ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- 【jquery】邮箱自动补全 + 上下翻动
最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang=&qu ...
- 自动补全Typeahead
采用 Typeahead (Bootstrap-3-Typeahead-master) <script type="text/javascript" src="/j ...
- input ajax自动补全
页面 <div class="manage-Car-add-info-sn"> <p style="width:25%; height:70%;floa ...
随机推荐
- BASE64Decoder小解
BASE64Decoder小解 Base64 是网络上最常见的用于传输8Bit 字节代码的编码方式之一,大家可以查看RFC2045 -RFC2049 ,上面有MIME 的详细规范. Base64 要求 ...
- ITU-T Technical Paper: 测量QoS的基本网络模型
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- LAV Filter 源代码分析 3: LAV Video (1)
LAV Video 是使用很广泛的DirectShow Filter.它封装了FFMPEG中的libavcodec,支持十分广泛的视频格式的解码.在这里对其源代码进行详细的分析. LAV Video ...
- hadoop任务监控页面namenode:50030(在hadoop配置中查找集群jobtracker的ip,访问50030)
公司集群,配置的hadoop.执行job,想去看看运行状态,却不知道jobtracker的机器ip: 查询hadoop 的jobtrack机器的ip,就查看文件conf/mapred-site.xml ...
- Android开发技巧——高亮的用户操作指南
Android开发技巧--高亮的用户操作指南 2015-12-15补记: 发现使用PopupWindow进行遮罩层的显示,在华为P7上会有问题.具体表现为:画出来的高亮部分会偏下.原因为:通过view ...
- hadoop 测试框架
hadoop 0.21以前的版本中(这里拿0.20为例,其他版本可能有少许不同),所有的测试相关代码都是放置在${HADOOP_HOME}/src/test下,在该目录下,是按照不同的目录来区分针对不 ...
- linux下shell中执行命令的顺序问题
在shell中有很多种命令的同义词,到底先执行的是哪一个命令呢,我们可以借助type -a命令来检查. 为了测试我们就对type本身做一条alias: alias type=type 然后我们通过ty ...
- LeetCode(23)-Implement Queue using Stacks
题目: Implement the following operations of a queue using stacks. push(x) -- Push element x to the bac ...
- Centos下安装mysql 和挂载硬盘
一,CentOS下安装Mysql 6.5 1.检测系统是否自带安装mysql # yum list installed | grep mysql 2.删除已经安装的Mysql # yum -y rem ...
- 【深度学习】目标检测算法总结(R-CNN、Fast R-CNN、Faster R-CNN、FPN、YOLO、SSD、RetinaNet)
目标检测是很多计算机视觉任务的基础,不论我们需要实现图像与文字的交互还是需要识别精细类别,它都提供了可靠的信息.本文对目标检测进行了整体回顾,第一部分从RCNN开始介绍基于候选区域的目标检测器,包括F ...