Bootstrap3 Typeahead - 在“远程”中调用函数答案

【问题标题】：Bootstrap3 Typeahead - Calling a function in 'Remote'Bootstrap3 Typeahead - 在“远程”中调用函数
【发布时间】：2013-11-10 18:23:36
【问题描述】：

我升级到 Bootstrap 3.0 版，我确实看到 typeahead 模块不存在。我正在使用 Web 服务，并且我使用以下方法来调用我的函数并填充我的数据集。但是，使用 twitter typeahead.js，我如何调用我的函数，或者如何仍然使用旧的 typeahead 模块？非常感谢您的帮助。谢谢。

            $("#searchVendor").typeahead({
            source: function (query) {
                    vieModel.callWebServiceFunctionList(counter1, query, isListCleared);   
       });

【问题讨论】：

标签： c# jquery twitter-bootstrap knockout.js twitter-bootstrap-3

【解决方案1】：

Typeahead.js 无法直接使用函数作为source。传递查询值的标准方法是在 remote 属性中使用包含 %QUERY 的 URL 字符串：

$("#searchVendor").typeahead({
            remote: '.../data.json?name=%QUERY'   
});

但是，对于您的情况，这可能还不够。 remote 也可以是一个对象，带有一个应用于 URL 的 url 和一个 replace 函数。

所以，创建一个类似callWebServiceFunctionList 的函数，它只返回 URL 而不是实际调用 Web 服务。

$("#searchVendor").typeahead({
            remote: {
               url: '.../data.json?counter=%COUNTER&query=%QUERY&isListCleared=%ISLISTCLEARED',
               replace: function(url, query) {
                  return url.replace('%COUNTER', counter1).replace('%QUERY', query).replace('%ISLISTCLEARED', isListCleared);
               }
});

See the docs 用于 remote 对象。

或者，您可以只为 Bootstrap 2.x 的预输入部分获取 JS，虽然您可能会遇到格式问题，it seems to work fine by itself（JSFiddle 演示）。

【讨论】：