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 = '';
        }
    };

async/awaitを使うと簡単に非同期処理を作成できます。 ただし対応ブラウザの問題がありますのでご注意ください。

表示すると以下のようになります

ぜひ試してみてください。