php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，类似百度、谷歌等搜索提示；输入关键词出现相应的下拉列表数据。
是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。（当然Twitter open source也有个bootstrap）。
1、基于Bootstrap v3 版本的 typeahead
第一，简单使用：
首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide="typeahead" 来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。
<html>
<head>
<meta charset="utf-8"/>
<link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">
<div class="form-group">
<!--第一种方法-->
<input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<button type="submit" class="btn" id="searchbtn">搜索</button>
</form>
</body>
</html>
第二，支持 Ajax 获取数据
注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。
如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。
<html>
<head>
<meta charset="utf-8"/>
<link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">
<div class="form-group">
<!--第一种方法-->
<!--<input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>-->
<input type="text" id="product_search" name="keys" class="form-control" data-provide="typeahead" data-value="" autocomplete="off" placeholder="请输入要搜索关键词">
</div>
<button type="submit" class="btn" id="searchbtn">搜索</button>
</form>
<script>
/***第二种方法****************************************/
console.log("欢迎使用typeahead");
/***第一种形式******返回json串***********************/
$('#product_search').typeahead({
source: function (query, process) {
return $.ajax({
url: './server.php',
type: 'post',
data: { query: query },
dataType: 'json',
success: function (result) {
var resultList = result.map(function (item) {
var aItem = { id: item.id, name: item.name };
return JSON.stringify(aItem);
});
return process(resultList); }
});
},
matcher: function (obj) {
var item = JSON.parse(obj);
return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
},
sorter: function (items) {
var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
while (aItem = items.shift()) {
var item = JSON.parse(aItem);
if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
else caseInsensitive.push(JSON.stringify(item));
}
return beginswith.concat(caseSensitive, caseInsensitive)
},
highlighter: function (obj) {
var item = JSON.parse(obj);
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong style="font-size:16px;">' + match + '</strong>'
})
},
updater: function (obj) {
var item = JSON.parse(obj);
$('#product_search').attr('data-value', item.id);
return item.name;
},
delay:500,
minLength:1,
items: 10, //显示10条
delay: 0, //延迟时间
}); /**第二种形式*****返回json串**********************************/
jQuery('#product_search').typeahead({
source: function (query, process) {
//query是输入值
jQuery.getJSON('./server.php', { "query": query }, function (data) {
process(data);
});
},
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong style="font-size:16px;">' + match + '</strong>'
})
},
updater: function (item) {
return item
},
afterSelect: function (item) {
//选择项之后的时间，item是当前选中的项
$("#product_search").attr("data-value",item.id);
},
delay:500,
minLength:1,
items: 10, //显示10条
delay: 0, //延迟时间
});
</script>
</body>
</html>
服务器处理文件 server.php
<?php
//1、 先获取当前搜索词"query"
//2、 从数据库中查询此字段的热词集合
//3、 从数据库中检索出包含此搜索词的热词集合，并按搜索次数排序,将数据返回给typeahead.js
if(!empty($_GET)){
$data = array();
$data[0]['id'] = 0;
$data[0]['name'] = "aaaaa";
$data[1]['id'] = 1;
$data[1]['name'] = "aaaaabbbbbb";
$data[2]['id'] = 2;
$data[2]['name'] = "aaaaaabbbbbccccc";
}else{
$data = array();
$data[0]['id'] = 0;
$data[0]['name'] = "baidu";
$data[1]['id'] = 1;
$data[1]['name'] = "baidu2";
$data[2]['id'] = 2;
$data[2]['name'] = "baidu3";
}
echo json_encode($data);die;
文件链接及打包地址：
ajax两种形式都支持：
ajax只支持第二种形式的 typeahead组件：
或 https://www.twitterbootstrapmvc.com/Documentation#typeahead 该 bootstrap.typeahead.min.js
demo打包地址：链接：http://pan.baidu.com/s/1geQ0DVX 密码：83vn
参考资料： 使用 Bootstrap Typeahead 组件 - 冠军 - 博客园
Bootstrap typeahead使用问题记录及解决方案
Bootstrap typeahead ajax result format - Example [结果格式的例子引导Typeahead Ajax] - 问题-字节技术
2、Twitter typeahead+bootstrap 官网用法：
typeahead的官方主页：http://twitter.github.io/typeahead.js/
typeahead的官方Example：http://twitter.github.io/typeahead.js/examples/
参考资料： 使用bootstrap typeahead插件
php + Bootstrap-v3-Typeahead 自动完成组件的使用的更多相关文章
- 【Bootstrap】 typeahead自动补全
typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...
- bootstrap - typeahead自动补全插件
$('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...
- Winform（C#.NET）自动更新组件的使用及部分功能实现
声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的. 而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...
- 【Android】友盟的自动更新组件
前言 又好又专业的服务能帮开发者省很多时间.一开始做项目也准备自己来统计数据.自己做自动更新,随着使用友盟服务的时间增加,渐渐放弃了这种想法,转而研究如何更充分的使用,这里分享一下使用自动更新组件的心 ...
- 使用Bootstrap v3.3.4注意细节box-sizing
一.bootstrap样式 在Bootstrap v3.3.4中有下面一条重置样式: * { -webkit-box-sizing: border-box; -moz-box-sizing: bord ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- Winform（C#.NET）自动更新组件的使用及部分功能实现(一点改进功能)
接前两篇继续: Winform(C#.NET)自动更新组件的使用及部分功能实现 Winform(C#.NET)自动更新组件的使用及部分功能实现(续) 借鉴文章:http://www.cnblogs.c ...
- Winform（C#.NET）自动更新组件的使用及部分功能实现(续)
接昨天的文章Winform(C#.NET)自动更新组件的使用及部分功能实现 强制更新的实现部分: 将DownloadConfirm窗体修改成单纯的类 public class DownloadConf ...
- 免费下载！Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
随机推荐
- js原型对象与Java类的比较
在我学习Javascript的原型对象时,我总是不自觉地拿Java的类思想来做比较,时间久了,我渐渐认识到二者有巨大的不同. 首先,类是不能直接当方法来运行,它最简便的方式是调用其静态方法:而原型对象 ...
- php链接mysql数据库
php连接数据库有三种方法,刚刚发现通过mysql_connect,mysql_query连接已被废弃,而现在推荐的是通过“面向对象方法”和“PDO方法”连接数据库. 而我在使用面向对象的方法连接时, ...
- hdu 小希的迷宫
真是被这道并查集的水题给坑哭了...忘记给uset数组初始化我也是醉了. 题目意思是找到判断是不是连通无环的图,首先想到的就是并查集. 1判断成环的时候,只要判断输入边的两个点.有一个共同的父节点,那 ...
- Greenplum 集群部署
最近开始接触Greenplum,线上也在使用了,感觉还不错,本次介绍一下集群的部署方法.那么Greenplum的架构如下: (架构图来源网络) 简单来说GPDB是一个分布式数据库软件,其可以管理和处理 ...
- Mysql和Oracle数据库concat()函数
一.函数的使用参数不同 Mysql支持多个字符串拼接: CONCAT(str1,str2,-) Oralce只支持两个字符串的拼接,若想拼接多个字符串可以嵌套使用concat CONCAT(str1, ...
- c++20701除法（刘汝佳1、2册第七章，暴搜解决）
20701除法 难度级别: B: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 输入正整数n,按从小到大的顺序输出所有 ...
- Algorithm | Tree traversal
There are three types of depth-first traversal: pre-order,in-order, and post-order. For a binary tre ...
- 本地化word复制来的网页中的图片
复制一个网页到word文档中,图片会以链接到网页里图片,而不是本地化保存在文档里.为了让图片存在文档里,而不是每次链接到外部,可以这样做. 全选文档,菜单栏里的编辑,点击链接,断开所有链接. 然后再复 ...
- java.lang.UnsupportedClassVersionError: Bad version number in .class file异常
java.lang.UnsupportedClassVersionError: Bad version number in .class file异常 部署工程时也出现过因为版本不同引起的问题,那时我 ...
- 今天Apple证书更新,提供 "证书的签发者无效" 解决办法
首先 下载苹果新证书 developer.apple.com/certificationauthority/AppleWWDRCA.cer 然后在"钥匙串访问"中 "显 ...