HTML
JavaScript
jQuery
インクリメンタルサーチ

【JavaScript】インクリメンタルサーチの実装(要jQuery)

インクリメンタルサーチの実装する必要があったので書いた。
APIに問い合わせる感じのやつです。

動き

検索欄にキーワードを入力すると、非同期でキーワードをGET送信する。
送信したキーワードに対して前方一致する検索結果がある場合、取得してフォームの下に表示する。

インクリメンタルサーチ

IncrementalSearchFormSample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IncrementalSearchFormSample</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            var keyupStack = [];
            $('#search').on('keyup', function () {

                keyupStack.push(1); //配列の後ろに追加

                // 指定時間後に処理を実行させる
                setTimeout(function () {

                    keyupStack.pop(); //配列の中身排出

                    // 最後にkeyupされてから次の入力がなかった場合
                    if (keyupStack.length === 0) {

                        $.ajax({
                            type: "GET",
                            url: "/apiurl",
                            data: {keyword : $('#search').val()} , // キーワードを送信してデータを検索してにいく
                        }).done(function(data) {

                            // 取得したデータを処理する(ここではjsonを受け取る想定)
                            var test_len = Object.keys(data["test"]).length;
                            for(var i = 0; i < test_len; i++){
                                $("#test").append("<li>" + data["test"][i]["name"] + "</li>");
                            }

                        }).fail(function(data) {
                            alert('failed!');
                        });

                    }
                }.bind(this), 500); // 0.5秒設定

            });

        });
        </script>
    </head>
    <body>
        検索欄:<input type="text" name="keyword" id="search">
        <ul id="test"></ul>
    </body>
</html>

jQuery依存症から抜け出せない

参考