Typeahead ajax 自动完成功能不工作

Question

我正在尝试根据 ajax 数据进行预输入自动完成，但它不起作用。

这是我的代码。

HTML

<input type="search" class="typeahead" id="order_address" autocomplete="off">

Javascript

$(文档).ready(函数() {

var suggestions = new Bloodhound({
    remote: {
        url: 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=...app_code=...&country=USA&mapview=41.382995,-74.301616;41.305715,-74.092278&query=%QUERY%',
        wildcard: '%QUERY%',
        filter: function (response) {
            return response.suggestions;
        }
    },
    datumTokenizer: function(suggestions) {
        return Bloodhound.tokenizers.whitespace(suggestions);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
});

$('#order_address').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'suggestions',
        displayKey: function(suggestions) {
            return suggestions.label;
        },
        source: suggestions.ttAdapter()
});

});

当我检查浏览器网络数据时，它正确地获取了如下建议数据。

http://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=...&app_code=...&country=USA&mapview=41.382995,-74.301616;41.305715,-74.092278&query=a

{"suggestions":[{"label":"United States Of America, NY, Cornwall, Angola Rd","language":"en","countryCode":"USA","locationId":"NT_7Cpok364jILgH4ksUcyjpC","address":{"country":"United States Of America","state":"NY","county":"Orange","city":"Cornwall","street":"Angola Rd","postalCode":"12518"},"distance":14896,"matchLevel":"street"},{"label":"United States Of America, NY, Garrison, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_DM6n2RQmjZ1YvBjMS6MyGA","address":{"country":"United States Of America","state":"NY","county":"Putnam","city":"Garrison","district":"Garrison","street":"Albany Post Rd","postalCode":"10524"},"distance":23981,"matchLevel":"street"},{"label":"United States Of America, NY, Montrose, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_NNt..Hu2Z5yXhvu4UpGXwA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Montrose","street":"Albany Post Rd","postalCode":"10548"},"distance":24394,"matchLevel":"street"},{"label":"United States Of America, NY, Croton-on-Hudson, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_fokNpGY5GJxSkp195bkloA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Croton-on-Hudson","street":"Albany Post Rd","postalCode":"10520"},"distance":26329,"matchLevel":"street"}]}

但它不适用于自动完成。

我现在可以做什么？

Answer 1

您需要在 Bloodhound 实例的 datumTokenizer 方法中包含要用于从 suggestions 数组中过滤对象的键。将建议作为 Bloodhound.tokenizers.whitespace 的参数传递仅在建议是字符串数组时才有效——分词器期望参数最终可以解析为可以匹配的字符串标记。

如果您想匹配建议数组中的标签，您需要将 datumTokenizer 函数更改为 return Bloodhound.tokenizers.whitespace(suggestions.label).

或者，如果您想检查多个属性，则需要 return 一组分词器，例如 [Bloodhound.tokenizers.whitespace(suggestions.label), Bloodhound.tokenizers.whitespace(suggestions.language)]。

请参阅下面针对数组的一个和两个属性进行匹配的示例片段。

$(document).ready(function() {

const data = {"suggestions":[{"label":"United States Of America, NY, Cornwall, Angola Rd","language":"en","countryCode":"USA","locationId":"NT_7Cpok364jILgH4ksUcyjpC","address":{"country":"United States Of America","state":"NY","county":"Orange","city":"Cornwall","street":"Angola Rd","postalCode":"12518"},"distance":14896,"matchLevel":"street"},{"label":"United States Of America, NY, Garrison, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_DM6n2RQmjZ1YvBjMS6MyGA","address":{"country":"United States Of America","state":"NY","county":"Putnam","city":"Garrison","district":"Garrison","street":"Albany Post Rd","postalCode":"10524"},"distance":23981,"matchLevel":"street"},{"label":"United States Of America, NY, Montrose, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_NNt..Hu2Z5yXhvu4UpGXwA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Montrose","street":"Albany Post Rd","postalCode":"10548"},"distance":24394,"matchLevel":"street"},{"label":"United States Of America, NY, Croton-on-Hudson, Albany Post Rd","language":"en","countryCode":"USA","locationId":"NT_fokNpGY5GJxSkp195bkloA","address":{"country":"United States Of America","state":"NY","county":"Westchester","city":"Croton-on-Hudson","street":"Albany Post Rd","postalCode":"10520"},"distance":26329,"matchLevel":"street"}]};

var suggestions = new Bloodhound({
    local: data.suggestions,
    datumTokenizer: function(suggestions) {
        return Bloodhound.tokenizers.whitespace(suggestions.label);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
});

var suggestions2 = new Bloodhound({
    local: data.suggestions,
    datumTokenizer: function(s) {
        return ['countryCode','matchLevel'].reduce(function(p,c) {
        return p.concat(Bloodhound.tokenizers.whitespace(s[c]))
        }, []);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
});


$('#order_address').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'suggestions',
        displayKey: function(suggestions) {
            return suggestions.label;
        },
        source: suggestions.ttAdapter()
});


$('#order_address2').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'suggestions2',
        displayKey: function(suggestions) {
            return suggestions.label;
        },
        source: suggestions2.ttAdapter()
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<p>Matches against label only</p>
<input type="search" class="typeahead" id="order_address" autocomplete="off">

<p>Matches against countryCode and matchLevel</p>
<input type="search" class="typeahead" id="order_address2" autocomplete="off">

Typeahead ajax 自动完成功能不工作

Typeahead ajax autocomplete is not working

ajax

autocomplete

typeahead

bloodhound