如图,我想在点击alabama之后,input框能显示a而不是alabama,请问要怎么实现呢?
1.不知道你用的typeahead.js是哪个版本的,下面列出我使用的typeahead.js的写法。
2.假设input框的name = city_name
3.我用的是:bootstrap3-typeahead.js,在github上托管的地址是:https://github.com/bassjobsen/Bootstrap-3-Typeahead
特为适应bootstrap3而更新的版本.
4.写法如下:
$("#city_name").typeahead({
source: json,//数据源
items: 8,//最多显示个数
updater: function (item) {
return item;//这里一定要return,否则选中不显示,外加调用display的时候null reference错误。
$('#city_name').val(item.name);
displayText: function (item) {
return "\"" + item.name+ "\" [" + item.initials+ "]";
},
autoSelect:true,
afterSelect: function (item) {
//选择项之后的事件 ,item是当前选中的
return this.$element.val(item.name);
},
delay: 500//延迟时间
});
5.重点就在这个 afterSelect:
afterSelect:选中之后执行的回调函数。这个选中是什么意思呢?
举个例子:就是指比如你输入a之后在出现的下来列表里选中了alababa;
当触发这个动作之后在input框里显示的value 是由回调函数里的代码控制的,所以根据你的需求,在回调函数里按照你的需求去截取字符串,然后return即可。
afterSelect: function (item) {
//选择项之后的事件 ,item是当前选中的。
//console.log(item);// 根据输出的结果可以帮你分析item的数据格式
// 按照你的需求去对数据进去处理
------
var info = ....;
// 返回处理过后的数据,即为input框里显示的value
return this.$element.val(info);
},
6.还有什么不明白的地方,可以给我联系。