Bootstrap3 Typeahead Ajax自动补全仅支持单字符输入问题排查

问题分析 #

仅输入第一位数字时下拉正常，后续输入无响应，核心问题集中在数据解析失败和后端返回格式不规范，结合你的代码和返回数据，具体问题点如下：

1. 后端返回的JSON格式非法：数组末尾多了一个逗号，属于无效JSON，会导致解析报错；
2. jQuery请求未明确指定数据类型：$.get默认根据响应头猜测类型，若后端未设置Content-Type: application/json，返回内容会被识别为字符串，而process()函数需要数组格式才能生成下拉列表。

解决步骤 #

1. 修复后端返回的JSON格式

将返回内容修正为合法JSON，移除末尾多余的逗号：

["9876124", "9812124", "9875124"]

同时确保后端响应头设置Content-Type: application/json，让jQuery能正确识别数据类型。

2. 修改JavaScript代码，指定数据类型并添加防抖

更新Typeahead初始化代码，明确请求的dataType为json，同时添加防抖逻辑减少无效请求：

$('#phone-autocomplete').typeahead({
    source: function (query, process) {
        // 防抖：避免每输入一个字符就发起请求，降低服务器压力
        clearTimeout(this.requestTimeout);
        this.requestTimeout = setTimeout(() => {
            $.get('/phone-autocomplete/', { searchstring: query }, function (data) {
                console.log('解析后的数据:', data); // 确认返回是数组格式
                process(data);
            }, 'json'); // 强制指定数据类型为JSON
        }, 300); // 300ms延迟，可根据需求调整
    },
    updater: function(item) {
        this.$element.val(item); // 用jQuery的val()方法更规范
        this.$element[0].form.submit();
        return item;
    }
});

3. 移除重复初始化标记

输入框已通过JS代码初始化Typeahead，可移除data-provide="typeahead"属性，避免重复初始化冲突：

<input class="form-control form-control-navbar typeahead" autocomplete="off"
       id="phone-autocomplete" type="search" name="searchstring" 
       placeholder="search phone" aria-label="Search">

4. 验证后端接口逻辑

直接在浏览器地址栏访问/phone-autocomplete/?searchstring=98（替换为实际多字符查询），确认返回内容是匹配的数组，而非空数组或错误格式数据。

内容的提问来源于stack exchange，提问作者Dova Kin