Question

我正在集成Algolia自动完成功能，不喜欢自动完成功能建议的外观。具体来说，我不希望行政区划出现在建议中，而只显示地址，城市，国家。如何省略管理查询？

例如，如果我输入“ Sarajevo”，则建议显示为“ Sarajevo，波斯尼亚和黑塞哥维那的萨拉热窝的坎顿”-我希望它仅显示为“ Sarajevo，波斯尼亚和黑塞哥维那”。

Answer 1

要解决一旦选择“地点”，管理级别就会显示在搜索栏中。，您可以利用jquery的焦点事件。

示例

    var cityCountry  ,searchInput;
    searchInput = $('#search-input'); //our search field

    //Initialize
    var placesAutocomplete = places({
        // appId: 'YOUR_PLACES_APP_ID',
        // apiKey: 'YOUR_PLACES_API_KEY',
        container: document.querySelector('#search-input'),
    });

    //Attach required data to cityCountry  
    placesAutocomplete.on('change', function(e){
        let suggestion,city,country;
        suggestion = e.suggestion;
        city = suggestion.name;
        country= suggestion.country;
        cityCountry  = city+', '+country;
    });

    //Manipulate the search field on focusout
    searchInput.on('focusout', function(){
        setTimeout(function () {
            searchInput.val(cityCountry);
        },1)
    });

注意，如果没有setTimeout()，它将无法正常工作。

Answer 2

您应该使用Places构造函数的templates选项。

这是一个简单的例子：

const placesInstance = places({
    ...
    templates: {
        suggestion: function(s) {
            return [s.highlight.name, s.highlight.city, s.highlight.country].join(', ');
        }
    }
});

看看默认情况下用于更详尽示例的函数： https://github.com/algolia/places/blob/master/src/formatDropdownValue.js

Answer 3

我对此进行了调整（由于某种原因，请使用双逗号），它运行良好-再次感谢您！：D

templates: {
                   suggestion: function({ name, country, highlight }) {
            return (highlight.name || name) + ', ' + (highlight.country || country);
                    }
                 },

Answer 4

我刚刚意识到，即使自动完成建议忽略了管理级别，一旦您选择了“地点”，管理级别也会显示在搜索栏中。有没有关于如何编辑返回值的建议，即选择城市/国家后显示什么？

谢谢。

阿尔及利亚自动完成-如何从自动完成建议中删除“行政”市镇/地区

4 个答案: