2

我正在使用 TypeAhead 为文本框提供自动完成结果。但似乎 Bloodhound 或 TypeAhead 仅在我提供的 JSON 数组中找到的第一个单词上进行搜索。

JSON 如下所示：

[
    {
        "name": "ALICE",
        "value": "ALICE",
        "physical_address": "ERF 270 CNR. OF THOMPSON AND INTWANA STREET, ALICE",
        "province": "PROVINCE",
        "tokens": [
            "ALICE",
            "PROVINCE",
            "ERF",
            "270",
            "CNR.",
            "OF",
            "THOMPSON",
            "AND",
            "INTWANA",
            "STREET",
            "ALICE"
        ]
    },
    {
        "name": "BUTTERWORTH",
        "value": "BUTTERWORTH",
        "physical_address": "SHOP NO. 1 MASONIC SHOPPING COMP, COR HIGH & BELL STREET BUTTERWORTH 4960",
        "province": "PROVINCE",
        "tokens": [
            "BUTTERWORTH",
            "PROVINCE",
            "SHOP",
            "NO.",
            "1",
            "MASONIC",
            "SHOPPING",
            "COMP",
            "COR",
            "HIGH",
            "&",
            "BELL",
            "STREET",
            "BUTTERWORTH",
            "4960"
        ]
    }
]

我正在初始化 TypeAhead，如下所示：

HTML：

<div class="films">
    <input type="text" class="form-control typeahead" placeholder="Search" name="films" autocomplete="off" id="search">
</div>

Javascript：

/* TypeAhead invoked */
var _prefetch_url = $root_path + '/media/mod_storelocator/stores_json.php';

// constructs the suggestion engine
var films = new Bloodhound({
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 15,
    prefetch: _prefetch_url
});

// kicks off the loading/processing of `local` and `prefetch`
films.initialize();

$('.films .typeahead').typeahead(null, {
    displayKey : 'value',
    source: films.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile([
            '<p class="repo-language">{{province}}</p>',
            '<p class="repo-name">{{name}}</p>',
            '<p class="repo-description">{{physical_address}}</p>'
        ].join(''))
    }
});

我真的很感激任何帮助/指针。

4

1 回答 1

1

您正在传入d.valuedatumTokenizer，因此它仅使用数组中每个元素的值对象。

另请注意，Bloodhound 对数据本身进行标记，因此您无需在 JSON 中传回各个标记（即您不需要tokens对象）。

因此，我会将其更改为使用 Bloodhound 来标记数组中每个元素的value和 组合的对象：physical_address

// constructs the suggestion engine
var films = new Bloodhound({
    datumTokenizer: function(d) { 
                      return Bloodhound.tokenizers.whitespace(d.name); 
                    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 15,
    prefetch: {
       url: _prefetch_url,
       filter: function(list) {
          return $.map(list, 
                 function(element) { 
                         return { name: element.value + " " + element.physical_address }; 
                 });
       }
    }
});

只能用这个 fiddle在本地环境中测试它，但预取应该以相同的方式工作。

于 2014-08-13T21:44:08.547 回答