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 函数。

实属原创，若有毛病，烦请指教！