javascript - typeahead.js如何改变搜索框的自动填充

Question

如图，我想在点击alabama之后，input框能显示a而不是alabama，请问要怎么实现呢？

Answer 1

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.还有什么不明白的地方，可以给我联系。