JS中typeahead自动补全组件如何更新数据源

问题根因排查 #

• prefetch机制限制：typeahead.js的prefetch配置是初始化时一次性拉取数据源缓存到localStorage，哪怕设置ttl:0，多数版本依然会优先读取本地缓存，不会主动触发后端接口重新拉取。
• 旧实例未销毁：直接重复调用.typeahead()初始化不会覆盖旧实例的缓存数据，修改配置后不会生效。

可行实现方案 #

方案1：手动清缓存+重新初始化（适合不定时更新数据源场景） #

封装初始化方法，每次需要更新数据源时调用即可：

// 封装初始化方法
function initSupplierTypeahead() {
    // 销毁已存在的typeahead实例
    if ($('#supplierNumberSearch').data('typeahead')) {
        $('#supplierNumberSearch').typeahead('destroy');
    }
    // 清除本地prefetch缓存，缓存key规则为 typeahead_{配置的name属性}
    localStorage.removeItem('typeahead_all-suppliers');
    
    // 重新初始化组件
    $('#supplierNumberSearch').typeahead({
        name: 'all-suppliers',
        prefetch: {
            url: '/Supplier/GetAllSuppliersJSON',
            ttl: 0
        },
        template: '<p><strong>{{value}}</strong> - {{text}}</p>',
        engine: Hogan,
        minLength: 0,
        limit: 50,
        highlight: true
    }).on('typeahead:selected', onAutoCompleteSelected)
    .on('typeahead:onTypeAheadComplete', onAutoCompleteSelected);
}

需要更新数据源时直接执行initSupplierTypeahead()即可。

方案2：改用remote配置（适合每次搜索都需要最新数据场景） #

如果需要每次触发补全都拉取后端最新数据，直接将prefetch替换为remote配置，关闭缓存即可：

function initSupplierTypeahead() {
    if ($('#supplierNumberSearch').data('typeahead')) {
        $('#supplierNumberSearch').typeahead('destroy');
    }
    localStorage.removeItem('typeahead_all-suppliers');
    
    $('#supplierNumberSearch').typeahead({
        name: 'all-suppliers',
        remote: {
            // 不需要传搜索参数可直接写固定url
            url: '/Supplier/GetAllSuppliersJSON',
            cache: false
        },
        template: '<p><strong>{{value}}</strong> - {{text}}</p>',
        engine: Hogan,
        minLength: 0,
        limit: 50,
        highlight: true
    }).on('typeahead:selected', onAutoCompleteSelected)
    .on('typeahead:onTypeAheadComplete', onAutoCompleteSelected);
}

注意事项 #

• 后端接口/Supplier/GetAllSuppliersJSON必须返回数组格式，每个元素需包含value字段作为匹配字段，其他自定义字段可自行扩展。
• 确认typeahead.js版本为0.10+，旧版本API规则存在差异，destroy方法和缓存key规则可能不匹配。

内容的提问来源于stack exchange，提问作者Shanu Garg