jquery-uiを使わないサジェストの実装

エキサイトの山口です。

今回はjquery-uiを使わないサジェストの実装をご紹介します。

jquery-uiを使わずにサジェストを実装する必要があったため組み直したものです。今時はVue.jsやReact.jsを使えば簡単にサジェストを作れるようですが、業務上少々サジェストのために入れるのは難しかったため、javascriptで組み直してみました。

APIを使用するサジェストです。簡単にAPIを呼び出してサジェストできるので、ご紹介します。

HTML

<input id="search_word"  name="keyword" type="text" autocomplete="off">
<ul id="search-suggest-box"></ul>

javascript

    const searchWord = document.getElementById('search_word');
    const suggestBox = document.getElementById('search-suggest-box');

    searchWord.addEventListener('input', function (e) {
        if (e.key == 'Tab') {
            return;
        }
        suggestCall(this.value);
    });

    async function suggestCall(term) {
        try {
            let url = '【API_URL】?term=' + term;
            const response = await fetch(url);
            const suggestData = await response.json();
            suggestBox.innerHTML = '';
            suggestData.forEach(function (suggest) {
                let element = document.createElement('li');
                element.onclick = function () {
                    let value = this.innerHTML;
                    searchWord.value = value;
                    suggestBox.innerHTML = '';
                }
                let txt = document.createTextNode(suggest);
                element.appendChild(txt);
                suggestBox.appendChild(element);
            });
        } catch (err) {
            suggestBox.innerHTML = '';
        }
    };