typeahead有什么作用_typeahead.js 使用教程小结

前言：

最近有个输入框自动补全的需求，例如百度搜索功能：

在输入框输入信息后，自动提示补全。我选择用typeahead.js，后来发现，原来这个库的相关学习资料很少，搞的稍微有点久，才弄明白点...

本文实属原创，如有错误，敬请指教！

简介：

在查资料的过程中，不难发现，typeahead.js一直会跟boostrap扯上关系。实际上在bootstrap 2.x时，自带了补全控件typeahead；但是到了，bootstrap 3.x时，舍弃了这个插件，这是出现了单独插件，名叫bootstrap-3-typeahead，再后面bootstrap-3-typeahead 改名 typeahead.js.

实践：

因为typeahead的更新变动总是很大，所以每个版本的改动也很大，而typeahead所以依赖的库也出现了稍微的变化。下面介绍两种方法：

第一个bower安装，也是比较能保证依赖文件的准确性：

在项目里面$ bower install typeahead.js

详解：

bloodhound.js(独立建议引擎)

typeahead.jquery.js(独立的typeahead库)

typeahead.bundle.js(bloodhound＋typeahead.jquery的组合体)

注：bloodhound.js和typeahead.jquery.js对jQuery 1.9＋依赖。

Examples:

1、基础示例

Html代码：

基本示例

js代码：

jQuery(function () {

/*** 1.基本示例 ***/

var provinces = ["广东省", "海南省", "山西省", "山东省","湖北省", "湖南省", "陕西省", "上海市", "北京市", "广西省"];

var substringMatcher = function (strs) {

return function findMatches(q, cb) {

var matches, substrRegex;

matches = [];//定义字符串数组

substrRegex = new RegExp(q, 'i');

//用正则表达式来确定哪些字符串包含子串的'q'

$.each(strs, function (i, str) {

//遍历字符串池中的任何字符串

if (substrRegex.test(str)) {

matches.push({ value: str });

}

//包含子串的'q',将它添加到'match'

});

cb(matches);

};

};

$('#basic-example .typeahead').typeahead({

highlight: true,

minLength: 1

},

{

name: 'provinces',

displayKey: 'value',

source: substringMatcher(provinces)

});

});

效果图下(请忽略丑丑的UI)：

数据为：

var provinces = ["广东省", "海南省", "山西省", "山东省","湖北省", "湖南省", "陕西省", "上海市", "北京市", "广西省"];

---------- 华丽丽的分割线 ----------

下面为要介绍两种用ajax获取远程数据的模式：

第一种是prefetch，是对数据请求一次，把所有数据拿下来。

第二种是remote，只有当触发输入框的时候，数据才从服务端获取。

2、ajax数据预读示例(prefetch)

Html代码为：

Ajax数据预读示例

JS代码为：

/*** 2.Ajax数据预读示例 ***/

// 远程数据源

var prefetch_provinces = new Bloodhound({

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),

queryTokenizer: Bloodhound.tokenizers.whitespace,

// 预获取并缓存

prefetch: '././data/provinces.json'

});

prefetch_provinces.initialize();

$('#ajax-prefetch-example .typeahead').typeahead({

hint: true,

highlight: true,

minLength: 1

}

, {

name: 'provinces',

displayKey: 'value',

source: prefetch_provinces.ttAdapter()

});

数据为：

[

{

"Id":1,

"value": "广东省"

},

{

"Id":2,

"value": "海南省"

},

{

"Id":3,

"value": "山西省"

},

{

"Id":4,

"value": "山东省"

},

{

"Id":5,

"value": "湖北省"

},

{

"Id":6,

"value": "湖南省"

},

{

"Id":7,

"value": "陕西省"

},

{

"Id":8,

"value": "上海市"

},

{

"Id":9,

"value": "北京市"

},

{

"Id":10,

"value": "广西省"

}

]

文件结构为：

效果如下：

这时候我们发现了一个问题，当你输入一个“海”字，是否还能跟示例1一样，出现“海南省”和“上海市”呢？答案看图：

结果是不能！！

为什么呢？?哈哈～因为相比示例1，示例2没有严谨的正则表达式再做筛选，改进方法是自己再添加多一个正则判断！

3.Ajax及时获取数据示例(remote)

Html代码：

Ajax及时获取数据示例

JS代码为：

/*** 3.Ajax及时获取数据示例 ***/

//远程数据源

var remote_cities = new Bloodhound({

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('CityName'),

queryTokenizer: Bloodhound.tokenizers.whitespace,

// 在文本框输入字符时才发起请求

remote: '././ajax/GetCities?q=%QUERY'

});

remote_cities.initialize();

$('#ajax-remote-example .typeahead').typeahead({

hint: true,

highlight: true,

minLength: 1

},

{

name: 'cities',

displayKey: 'CityName',

source: remote_cities.ttAdapter(),

});

数据为：

[{"Id":1,"ProvinceName":"广东省","CityName":"广州市"},{"Id":2,"ProvinceName":"山东省","CityName":"济南市"},{"Id":3,"ProvinceName":"陕西省","CityName":"西安市"},{"Id":4,"ProvinceName":"北京市","CityName":"北京市"},{"Id":5,"ProvinceName":"广西自治区","CityName":"南宁市"},{"Id":6,"ProvinceName":"江苏省","CityName":"南京市"}]

文件结构为：

效果图为：

看到这里应该有不少人有疑问吧？为什么输入“南”字，虽然与“南”相关的数据都有匹配到，但是所有数据都出来了？这是为什么呢？

答案有点绕，首先，我们要清楚一点，remote的方法是当你触发事件后，才想远程及时获取数据的，但是示例3全部用到的是前端的东西，只是模拟从远程拿取数据，并没有从真正的服务器上面获取，所以结果就是显示所有数据(我的错！哈哈哈)，解决方法就是：在服务端加多一个正则加以过滤，只有匹配到的才拿下来。虽然说前端也是可以做过滤的，但是尽量不要把不必要的数据下载下来。

有些同学可能会问了，示例2和示例3的数据匹配方式好像不同耶？为什么同一个库示例2匹配只从头开始，而示例3则是任意文字匹配呢？

答案：因为在typeahead里面prefetch和remote封装的方法不同。详情可以查看typeahead里面的源码。

接口：

name —— 数据集的名字。

source —— 规定包含查询时要显示的值的数据源。值的类型是 array，默认值是 [ ]。

items —— 规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8。

highlighter —— 用于自动高亮突出显示结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。

minLength —— 推荐引擎开始渲染所需要的最小字符。默认为 1 。

hint —— 默认为 true,会自动补全第一个匹配的元素，设置为 false 时，typeahead 将不会补全 .

display - 对于推荐对象，决定用何种字符串表示，并将会在某个输入控件选择后使用。其值可以是关键字符串，或者是将推荐对象转换为string的函数。默认为 value.

$('.typeahead').typeahead('destroy');移除typeahead功能，并将 input 元素的状态重置为原始状态。

$('.typeahead').typeahead('open');打开typeahead下拉菜单。

$('.typeahead').typeahead('close');关闭typeahead的下拉菜单。

var myVal = $('.typeahead').typeahead('val'); 返回typeahead的当前值，该值为用户输入到 input 元素中的文本

$('.typeahead').typeahead('val', myVal);设置typeahead的值，要来替代 jQuery#val 函数。

实属原创，如有错误，烦请指教！