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 脚本。

  1. <html>
  2. <head>
  3.     <meta charset="utf-8"/>
  4.     <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />
  5. </head>
  6. <body>
  7.     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  8.     <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  9.  
  10.     <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">
  11.         <div class="form-group">
  12.             <!--第一种方法-->
  13.             <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
  14.         </div>
  15.         <button type="submit" class="btn"  id="searchbtn">搜索</button>
  16.     </form>
  17. </body>
  18. </html>

　　第二，支持 Ajax 获取数据

　　注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。

　　如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。

  1. <html>
  2. <head>
  3.     <meta charset="utf-8"/>
  4.     <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />
  5. </head>
  6. <body>
  7.     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  8.     <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  9.  
  10.     <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">
  11.         <div class="form-group">
  12.             <!--第一种方法-->
  13.             <!--<input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>-->
  14.             <input type="text" id="product_search" name="keys" class="form-control"  data-provide="typeahead" data-value="" autocomplete="off" placeholder="请输入要搜索关键词">
  15.         </div>
  16.         <button type="submit" class="btn"  id="searchbtn">搜索</button>
  17.     </form>
  18.     <script>
  19.         /***第二种方法****************************************/
  20.         console.log("欢迎使用typeahead");
  21.         /***第一种形式******返回json串***********************/
  22.         $('#product_search').typeahead({
  23.             source: function (query, process) {
  24.                 return $.ajax({
  25.                     url: './server.php',
  26.                     type: 'post',
  27.                     data: { query: query },
  28.                     dataType: 'json',
  29.                     success: function (result) {
  30.                         var resultList = result.map(function (item) {
  31.                             var aItem = { id: item.id, name: item.name };
  32.                             return JSON.stringify(aItem);
  33.                         });
  34.                         return process(resultList);
  35.  
  36.                     }
  37.                 });
  38.             },
  39.             matcher: function (obj) {
  40.                 var item = JSON.parse(obj);
  41.                 return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
  42.             },
  43.             sorter: function (items) {
  44.                var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
  45.                 while (aItem = items.shift()) {
  46.                     var item = JSON.parse(aItem);
  47.                     if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
  48.                     else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
  49.                     else caseInsensitive.push(JSON.stringify(item));
  50.                 }
  51.                 return beginswith.concat(caseSensitive, caseInsensitive)
  52.             },
  53.             highlighter: function (obj) {
  54.                 var item = JSON.parse(obj);
  55.                 var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
  56.                 return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
  57.                     return '<strong style="font-size:16px;">' + match + '</strong>'
  58.                 })
  59.             },
  60.             updater: function (obj) {
  61.                 var item = JSON.parse(obj);
  62.                 $('#product_search').attr('data-value', item.id);
  63.                 return item.name;
  64.             },
  65.             delay:500,
  66.             minLength:1,
  67.             items: 10,   //显示10条
  68.             delay: 0,  //延迟时间
  69.         });
  70.  
  71.         /**第二种形式*****返回json串**********************************/
  72.         jQuery('#product_search').typeahead({
  73.             source: function (query, process) {
  74.                 //query是输入值
  75.                 jQuery.getJSON('./server.php', { "query": query }, function (data) {
  76.                     process(data);
  77.                 });
  78.             },
  79.             highlighter: function (item) {
  80.                 var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
  81.                 return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
  82.                     return '<strong style="font-size:16px;">' + match + '</strong>'
  83.                 })
  84.             },
  85.             updater: function (item) {
  86.                 return item
  87.             },
  88.             afterSelect: function (item) {
  89.                 //选择项之后的时间，item是当前选中的项
  90.                 $("#product_search").attr("data-value",item.id);
  91.             },
  92.             delay:500,
  93.             minLength:1,
  94.             items: 10,   //显示10条
  95.             delay: 0,  //延迟时间
  96.         });
  97.     </script>
  98. </body>
  99. </html>

　　服务器处理文件 server.php

  1. <?php
  2.     //1、 先获取当前搜索词"query"
  3.     //2、 从数据库中查询此字段的热词集合
  4.     //3、 从数据库中检索出包含此搜索词的热词集合，并按搜索次数排序,将数据返回给typeahead.js
  5.     if(!empty($_GET)){
  6.         $data = array();
  7.         $data[0]['id'] = 0;
  8.         $data[0]['name'] = "aaaaa";
  9.         $data[1]['id'] = 1;
  10.         $data[1]['name'] = "aaaaabbbbbb";
  11.         $data[2]['id'] = 2;
  12.         $data[2]['name'] = "aaaaaabbbbbccccc";
  13.     }else{
  14.         $data = array();
  15.         $data[0]['id'] = 0;
  16.         $data[0]['name'] = "baidu";
  17.         $data[1]['id'] = 1;
  18.         $data[1]['name'] = "baidu2";
  19.         $data[2]['id'] = 2;
  20.         $data[2]['name'] = "baidu3";
  21.     }
  22.     echo json_encode($data);die;

文件链接及打包地址：　

　　　　　　ajax两种形式都支持：　

　　　　　　bootstrap-3-typeahead cdn

　　　　　   ajax只支持第二种形式的 typeahead组件：　

　　　　　　自动补全插件-bootstrap-3-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] - 问题-字节技术

　　　　　　typeahead Bloodhound完整例子

2、Twitter typeahead+bootstrap 官网用法：

　　typeahead的官方主页：http://twitter.github.io/typeahead.js/

　　typeahead的官方Example：http://twitter.github.io/typeahead.js/examples/

参考资料：　　使用bootstrap typeahead插件

　　　　　　　Twitter bootstrap模糊查询插件

php + Bootstrap-v3-Typeahead 自动完成组件的使用的更多相关文章

  1. 【Bootstrap】 typeahead自动补全

    typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...

  2. bootstrap - typeahead自动补全插件

    $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...

  3. Winform（C#.NET）自动更新组件的使用及部分功能实现

    声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的.   而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...

  4. 【Android】友盟的自动更新组件

    前言 又好又专业的服务能帮开发者省很多时间.一开始做项目也准备自己来统计数据.自己做自动更新,随着使用友盟服务的时间增加,渐渐放弃了这种想法,转而研究如何更充分的使用,这里分享一下使用自动更新组件的心 ...

  5. 使用Bootstrap v3.3.4注意细节box-sizing

    一.bootstrap样式 在Bootstrap v3.3.4中有下面一条重置样式: * { -webkit-box-sizing: border-box; -moz-box-sizing: bord ...

  6. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  7. Winform（C#.NET）自动更新组件的使用及部分功能实现(一点改进功能)

    接前两篇继续: Winform(C#.NET)自动更新组件的使用及部分功能实现 Winform(C#.NET)自动更新组件的使用及部分功能实现(续) 借鉴文章:http://www.cnblogs.c ...

  8. Winform（C#.NET）自动更新组件的使用及部分功能实现(续)

    接昨天的文章Winform(C#.NET)自动更新组件的使用及部分功能实现 强制更新的实现部分: 将DownloadConfirm窗体修改成单纯的类 public class DownloadConf ...

  9. 免费下载！Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

随机推荐

  1. android-数据存储之远程服务器存储

    一.如何编码实现客户端与服务器端的交互 <一>JDK内置原生API HttpUrlConnection <二>Android内置的包装API HttpClient浏览器 < ...

  2. HDU3732 背包DP

    Ahui Writes Word Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. java项目开发的一些准备工作

    做项目有一段时间了,每次接手一个新项目都要在开发前做些准备工作,方便开发. 有些东西在配置的时候经常会忘记,所有整理一份,方便以后查阅! 1.安装JDK及搭建环境,安装tomcat及搭建环境,这些一般 ...

  4. 2_STL容器

    STL算法的精髓在于  算法的  返回值!!! String: string是STL的字符串类型,通常用来表示字符串:C语言中一般用char* char*字符指针;string是类封装了char*,管 ...

  5. svn文件批量清除

    svn文件批量清除 http://files.cnblogs.com/files/douxuyao/clearsvn.rar

  6. 安装Arch Linux

    参考自:https://wiki.archlinux.org/index.php/Main_Page_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87) 用fdisk建立分区 ...

  7. 同时使用python2和Python3

    问题:thrift生成的是python2代码,之前使用的是Python3因此需要同时使用两个版本. 方案:将python3的可执行文件重命名为python3(默认为Python),这样使用pyhton ...

  8. Java内存泄露及性能调优实例

    内存泄漏及解决方法 1)系统崩溃前的一些现象 每次垃圾回收的时间越来越长,由之前的10ms延长到50ms左右,FullGC的时间也有之前的0.5s延长到4.5s:FullGC的次数越来越多,最频繁时隔 ...

  9. kuohao

    #include <stdio.h> int b[50]; int a[50]; int w[50]; int main() { freopen("in.txt",&q ...

  10. Maven：解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    1.添加M2_HOME的环境变量 2.Preference->Java->Installed JREs->Edit 选择一个jdk, 添加  -Dmaven.multiModuleP ...