Bootstrap-Ajax-Typeahead 当查询不在 displayField 中时不显示结果

Question

我在 Django 应用程序上有一个 Bootstrap-Ajax-Typeahead 实现，用于搜索我们系统中的页面。我通过 AJAX 获得与基于查询的搜索结果相匹配的页面，用户可以点击预先输入的建议并转到相关页面。

但是，如果查询字符串不是 displayField（标题）的一部分，则该建议不会显示，尽管我可以通过我的搜索机制看到它 return。

例如，如果我搜索 "motion picture"，我会通过搜索得到 JSON object return，例如：

{
     title: "Movies",
     url: "/movies/",
     description: "Find a motion picture in your area"
}

当在 description 属性中找到匹配项时，我仍想向用户显示结果，但 Typeahead 仅在存在匹配提示时才会显示。

如何显示查询不在显示字段中的搜索结果？

注意：我正在使用 typeahead-bootstrap w/ Bv3。

$(document).ready(function ($) {
    var JSONSearchURL = "/search/";
    var searchBox = $('#search-form');
    searchBox.typeahead({
        onSelect: function (item) {
            window.location = item.value;
        },
        ajax: {
            url: JSONSearchURL,
            timeout: 800,
            displayField: "title",
            valueField: "url",
            method: "get",
            dataType: "JSON",
            preDispatch: function (query) {
                return {
                    q: query
                }
            },
            preProcess: function (data) {
                return data;
            }
        }
    });
});

Answer 1

默认情况下，bootstrap-ajax-typeahead 使用 displayField 搜索匹配项。如果要覆盖此行为并搜索另一个字段，则需要覆盖 grepper 事件。这样的东西应该可以工作（未经测试）：

grepper: function(data){
    var that = this;
    if(data && data.length){
        items = $.grep(data, function(item){
            return that.matcher(item['description']);
        });
        return items;
    }
    return null;
}

在此处查看 grepper 的默认实现：https://github.com/biggora/bootstrap-ajax-typeahead/blob/master/src/bootstrap-typeahead.js#L283

Bootstrap-Ajax-Typeahead 当查询不在 displayField 中时不显示结果

Bootstrap-Ajax-Typeahead not showing results when query not in displayField

javascript

typeahead

twitter-bootstrap

typeahead.js

twitter-bootstrap-3