Fork Me

bootstrap系列之typeahead

bootstrap-typeahead

自动补全插件!

需求

  1. 编写一个接口,查询CRM客户公司名称。
  2. 调用接口,模糊查询,自动搜索补全公司名称。
  3. 要求搜索显示名称,联系人,手机号,选择后内容只显示名称。

接口数据

具体如写接口此处省略。
接口返回数据大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
code: 1,
data: [
{
id: 1,
text: "中国广州1 赵 12345678910"
},
{
id: 2,
text: "中国广州2 钱 12345678910"
},
{
id: 6,
text: "中国北京2 刘 12345678910"
},
{
id: 7,
text: "北上广深12 陈 123456789109"
}
]
}

HTML代码

1
2
3
4
5
<div class="form-group">
<label for="company_name">公司名称</label>
<input type="text" class="form-control" id="company_name" placeholder="公司名称" value="" autocomplete="off">
<input type="hidden" id="customer_id">
</div>

设置autocomplete=”off”关闭自动补全功能,避免冲突

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#company_name').typeahead({
source: function (query, process) {
return $.ajax({
url: 'get_customer',
type: 'post',
data: {data: query},
dataType: 'json',
success: function (result) {
if(result.code == "1") {
var resultList = result.data.map(function (item) {
var aItem = {id: item.id, name: item.text};
console.log(aItem);
return JSON.stringify(aItem);
});
console.log(resultList);
return process(resultList);
}
}
});
},
})

以上基本实现自动补全小效果,存在问题:

  1. 补全显示,是以JSON形式。
  2. 选择补全后,只显示名称。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#解决问题1
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>' + match + '</strong>'
});
},
#解决问题2
updater: function (obj) {
var item = JSON.parse(obj);
$('#customer_id').attr('value', item.id);
var val = item.name.split(" ");
return val[0];
}