Алголия WordPress Автозаполнение - PullRequest
Новая
       6

Алголия WordPress Автозаполнение

0 голосов
/ 21 сентября 2018

Я пытаюсь настроить плагин WordPress https://github.com/algolia/algoliasearch-wordpress в соответствии с нашими потребностями.То, что мы хотим сделать, это иметь результат поиска, который загрузит данные на той же странице.

Мои сообщения WordPress и данные успешно проиндексированы.Я добавил окно поиска на страницу, и автозаполнение запускается.

Из коробки шаблон плагина WordPress оборачивает результат в тег привязки и назначает ему URL-адрес найденного результата.При нажатии это приведет вас к этому сообщению.Однако я хочу перехватить этот щелчок и загрузить результат на той же странице, не переходя прочь.

Я удалил href из якоря.Я также отредактировал прилагаемый шаблон autocomplete.php, где происходит вызов autocomplete:selected.Там я убрал вызов, чтобы уйти, удалив window.location.href.

Теперь у меня есть две основные проблемы.

1 - Когда пользователь нажимает на результат поиска, я хотел бы, чтобы ввод был заполнен заголовком элемента, по которому он щелкнул.Я добавил это в обратный вызов autocomplete:selected, добавив $searchInput[0].value = suggestion.post_title.Который, кажется, правильно меняет значение ввода, но как только я щелкаю прочь от ввода, он возвращается к исходному введенному значению.Поэтому, если я наберу «may» и нажму на результат «mayonnaise», к данным результата можно будет получить доступ, но ввод вернется к «may».Моя функция выглядит так: 

/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
    .on('autocomplete:selected', function (e, suggestion) {
    console.log(suggestion);
    autocomplete.autocomplete.close();
});

2 - Кажется, что выпадающий список автозаполнения не скрывается, когда пользователь щелкает.Чтобы решить эту проблему, мне пришлось использовать то, что я думаю, немного неприятно с jQuery.Мне было интересно, если это действительно требуется?Мой код чуть ниже autocomplete:selected выглядит так: 

jQuery('body').on("click", function(event){
    if (!jQuery(event.target).closest($searchInput[0]).length) {
        autocomplete.autocomplete.close();
    }
});

1 Ответ

0 голосов
/ 21 сентября 2018

Нашел ответы на мои вопросы.

1 - Чтобы заполнить ввод заголовком выбранного результата поиска, я добавил вызов в метод setVal объекта автозаполнения.Я до сих пор не уверен, почему это необходимо. 

/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
    .on('autocomplete:selected', function (e, suggestion) {
        autocomplete.autocomplete.setVal(suggestion.post_title);
});

2 - похоже, что конфигурация объекта автозаполнения использует значение WP_DEBUG для установки значения debug.Опции, доступные для компонента автозаполнения, можно найти здесь https://github.com/algolia/autocomplete.js#options.. Это привело меня к выводу, что когда для debug установлено значение true, поле автозаполнения не скрывается при выделении.Это позволяет упростить отладку и стилизацию компонента.

...