繁体   English   中英

Algolia 自动完成 - 如何从自动完成建议中删除“行政”市/区

[英]Algolia autocomplete - how to remove "administrative" municipalities/districts from autocomplete suggestions

我正在集成 Algolia 自动完成功能,不喜欢自动完成建议的外观。 具体来说,我不希望建议中出现行政直辖市和区,只有address, city, country。 我怎样才能省略管理查询?

例如,如果我输入“Sarajevo”,建议显示为“Sarajevo, Kanton of Sarajevo, Bosnia and Herzegovina”——我希望它显示为“Sarajevo, Bosnia and Herzegovina”。

您应该使用 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

我对此进行了调整(由于某种原因,请使用双逗号),它运行良好-再次感谢您! :d

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

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

谢谢。

解决一旦您选择“地点”,行政级别就会显示在搜索栏中的问题。 ,您可以利用 jquery 的 focusout 事件。

例子

    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()它将无法工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM