一文字入力すると一気に候補が出てくるアレについて
※ブログっぽくなく雑に書きます
googleやAmazonの予測変換(autocomplete)の機能
ここのプラグインを使いたいのでネットサーフィンしていた。時代が古いのですが、このページしか見当たらなかった・・・。
Amazonの商品検索するウィジェット jQuery Amazon ProductSearch デモページ - ウィザード・コード | WIZARD-CODE
検索窓入力すると候補が出てきてかなり便利
これはどうやってるのかよくわからなかったけど、調べたら結局Amazon師範代が一文字入力ごとに候補文字列をババババーっとこっちに投げてくれるみたい。
解説ページ(英語)
http://blog.evanrosebrook.com/2011/01/using-amazons-autocomplete-suggestions.html
中身は調べてみると原始的かな?
上のページのようにgoogle chromeのデベロッパーツール(F12)でみると、「あ」を入力した時。
このリクエストが入力時に送られて、瞬時に↓がかえってくる。
completion = ["あ",["アイフォン6ケース","嵐","アイフォン5sケース","amazon 本","アンダーアーマー","アディダス","アミーボ","アナと雪の女王","アイカツ","アイロン"],[{"nodes":[{"alias":"electronics","name":"家電&カメラ"},{"alias":"computers","name":"パソコン・周辺機器"}]},{},{},{},{},{},{},{},{},{}],[]];updateISSCompletion();
ここに予測変換の結果が全部載ってるので、これをブラウザ側で表示してるだけです。(予測変換はAmazon側で瞬時にやってるのはすごいのだろう
ソースコードとか見たけど細かく見てないです。とりあえずAjaxでAPIに投げてその帰ってきた結果を表示してるんだなーって感じがなんとなく香ってきました(笑)
jQuery UIというのを使うようです。
jQuery オートコンプリート・入力補完インタフェースまとめ - Lowaivill Tech Blog
ただ、僕はいまAngularJSというのを勉強中で、教えてもらってる方に「jQueryは使うな」と言われているのでAngularJSでできるようにしたい(多分簡単にできる)