bootstrap-typeahead 的显示字段使用多个值

Question

如果这是一个重复的问题，我很抱歉，但我不明白其他人的答案。我正在使用 Twitter Bootstrap Ajax Typeahead 插件 (https://github.com/biggora/bootstrap-ajax-typeahead/) 从来自 SQL 查询的数据中搜索电子邮件。这是我在 php 文件中使用的代码，我将人们的电子邮件用作 valueField，将人们的名字用作 displayField，它运行良好。

inputSearch.typeahead({ 
  ajax: {
     url: urlAjax + '?requete=rechercheannuaire',
     displayField: "description",
     valueField: "id",
     triggerLength: 2,
     method: "get",
     loadingClass: "loading-circle",
     preProcess: function(data){
        if(data.type === "error")
        {
           return false;
        }

        return data.datas;    
     }
  },
  onSelect: function(data){
    //alert("assez tot");
    data.text = data.value;
    //console.log(data);
    $("#chercherinvite").val(data.text);

        return data; 
  }

});

问题是我必须能够搜索 "Dujardin" 以及 "Du Jardin"，但我找不到为 displayField 分配多个值的方法。如果有人可以解释 typeahead 的工作原理，我将不胜感激，我不明白文档。

Answer 1

根据插件文档，您不能为 displayField 选项分配多个值。但是，您可以 re-write 事件。

快速查看 source code of bootstrap-ajax-typeahead 后，我们可以发现 "matcher" 事件用作向用户显示或不显示值的过滤器。

为了能够同时匹配 "Du jardin" 和 "Dujardin"，我们必须对字符串进行操作。在这里，我建议你：

删除任何变音符号
删除任何 non-word 个字符（除了 [A-Za-z0-9_]）
删除所有下划线
将字符串设置为小写

要执行 #1，我建议您使用此 fantastic script by rdllopes。

我写了一个 POC。这是 JSON 来源（称为 "source.json"）：

[
    { "id": 1, "name": "jdupont@example.com - Jean Du Pont"},
    { "id": 2, "name": "jdupont2@example.com - Jean Dupont"},
    { "id": 3, "name": "jdupont3@example.com - Jéan Dupônt"},
    { "id": 4, "name": "mbridge@example.com - Michel Bridge"}
]

这是我用于匹配元素的脚本：

$('#search').typeahead({
    // Our source is a simple JSON file
    ajax: 'source.json',

    // Display field is a list of names
    displayField: 'name',

    // And value field a list of IDs
    valueField: 'id',

    matcher: function(item)
    {
        // For both needle and haystack, we :
        // 1. Remove any diacritic character
        // 2. Remove any non-word character (all except [A-Za-z0-9_])
        // 3. Remove any underscore
        // 4. Set the string to lowercase
        var needle = removeDiacritics(this.query).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();
        var haystack = removeDiacritics(item).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();

        // Does the needle exists in haystack?
        return ~haystack.indexOf(needle);
    }
});

bootstrap-typeahead 的显示字段使用多个值

bootstrap-typeahead's displayfield using multiple values

ajax

bootstrap-typeahead