Ajax で Youtube の自動補完(オートコンプリート)

はじめに

検索フォームのオートコンプリートを自作するのはなかなかしんどいです。今回は動画系の検索フォームに役立つ(かもしれない)オートコンプリート方法を紹介します。とはいっても、Google にリクエストを送って json でデータを受け取り、後は jQuery UI の Autocomplete を使うだけです。

• 参考
  • https://gist.github.com/chandsie/4441018

準備

<!-- Autocomplete for search field -->
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

jQuery UI の Autocomplete を使うので上記の２つを記述。また、別途普通の jQuery 記述用のファイルも取り込んでおいてください。

コード

<input id="keyword" type="text" name="search_value" value="" placeholder="Search...">

検索フォームの input に id="keyword" を設定しておきます。

<script type="text/javascript">
    var suggestCallBack;
    $(function () {
        $('#keyword').autocomplete({
            source: function (request, response) {
                $.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
                    {
                      "hl":"ja", // Language
                      "ds":"yt", // Restrict lookup to youtube
                      "jsonp":"suggestCallBack", // jsonp callback function name
                      "q":request.term, // query term
                      "client":"youtube" // force youtube style response, i.e. jsonp
                    }
                );
                suggestCallBack = function (data) {
                    var suggestions = [];
                    $.each(data[1], function(key, val) {
                        suggestions.push({"value":val[0]});
                    });
                    suggestions.length = 5; // prune suggestions list to only 5 items
                    response(suggestions);
                };
            },
            autoFocus: true,
            delay: 300,
            minLength: 2,
        });
    });
</script>

パラメータだけ解説します。

• suggestions.length：取得した補完候補の中から実際に表示する数(最大10)
• autoFocus：表示された補完候補の一番上にフォーカスをあてるかどうか
• delay：何ミリ秒後に補完候補を取得し、表示するか
• minLength：この値以上の文字が入力されないと補完候補が取得されない
  • 現在は２なので、１文字入力しても何の変化も起きない

おわりに

Google API 系って全然日本人使ってないんですね、ってぐらい日本語の情報が少ないですね。あと注意点として、この手の実装は Google の仕様変更によりすぐ使えなくなったりするので、最新のドキュメントを参照するのが本当に重要だと思います！