Question

我正在尝试从ajax数据进行typeahead自动完成，但它无法正常工作。

这是我的代码。

HTML

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

的Javascript

$（document）.ready（function（）{

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

您需要在suggestions实例的datumTokenizer方法中包含要用于过滤Bloodhound数组中对象的密钥。传递建议作为Bloodhound.tokenizers.whitespace的参数只有在建议是一个字符串数组时才有效 - 标记器期望它最终可以解析为可以匹配的字符串标记的参数。

如果您想与建议数组中的标签进行匹配，则需要更改datumTokenizer函数以返回Bloodhound.tokenizers.whitespace(suggestions.label)。

或者，如果您想要检查多个属性，则需要返回[Bloodhound.tokenizers.whitespace(suggestions.label), Bloodhound.tokenizers.whitespace(suggestions.language)]之类的标记器数组。

请参阅以下代码段，了解与数组的一个和两个属性匹配的示例。

＆＃13;

$(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()
});
});

＆＃13;

<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">

＆＃13;

Typeahead ajax自动填充无效

1 个答案: