BootStrap-Typeahead.js的用法

最新推荐文章于 2025-06-02 09:05:07 发布

原创最新推荐文章于 2025-06-02 09:05:07 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TypeaHead

实用前端插件学习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Typeahead控件实现城市数据自动补全的功能。通过将城市名称数据绑定到Typeahead控件，实现了输入框的智能提示，提高了用户体验。文章详细展示了JavaScript代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    var aheadData = ["ANSHAN,鞍山市", "ANQING,安庆市", "ANYANG,安阳市", "ALASHANMENG,阿拉善盟", "ABAZHOU,阿坝州", "ANSHUN,安顺市", "ALIDIQU,阿里地区", "ANKANG,安康市", "AKESUDIQU,阿克苏地区", "ALETAIDIQU,阿勒泰地区", "ALAER,阿拉尔市", "BEIJING,北京市"];

    $("#" + id).typeahead({
        source: aheadData,
        highlighter: function (item) {
            var city = item.split(',')[1];
              return city;
              //显示的内容
        },
        updater: function (item) {

              //选择后事件
            var city = item.split(',')[1];


            return city;
        }

    });