読者です 読者をやめる 読者になる 読者になる

一文字入力すると一気に候補が出てくるアレについて

※ブログっぽくなく雑に書きます

 googleAmazonの予測変換(autocomplete)の機能

ここのプラグインを使いたいのでネットサーフィンしていた。時代が古いのですが、このページしか見当たらなかった・・・。


Amazonの商品検索するウィジェット jQuery Amazon ProductSearch デモページ - ウィザード・コード | WIZARD-CODE

 

 検索窓入力すると候補が出てきてかなり便利
これはどうやってるのかよくわからなかったけど、調べたら結局Amazon師範代が一文字入力ごとに候補文字列をババババーっとこっちに投げてくれるみたい。

 

解説ページ(英語)
 

http://blog.evanrosebrook.com/2011/01/using-amazons-autocomplete-suggestions.html

 

 中身は調べてみると原始的かな?

 

上のページのようにgoogle chromeデベロッパツール(F12)でみると、「あ」を入力した時。

 

Request URL:
http://completion.amazon.co.jp/search/complete?method=completion&q=%E3%81%82&search-alias=aps&client=amazon-search-ui&mkt=6&fb=1&xcat=0&x=updateISSCompletion&sc=1

このリクエストが入力時に送られて、瞬時に↓がかえってくる。

completion = ["あ",["アイフォン6ケース","嵐","アイフォン5sケース","amazon 本","アンダーアーマー","アディダス","アミーボ","アナと雪の女王","アイカツ","アイロン"],[{"nodes":[{"alias":"electronics","name":"家電&カメラ"},{"alias":"computers","name":"パソコン・周辺機器"}]},{},{},{},{},{},{},{},{},{}],[]];updateISSCompletion();

ここに予測変換の結果が全部載ってるので、これをブラウザ側で表示してるだけです。(予測変換はAmazon側で瞬時にやってるのはすごいのだろう

 

ソースコードとか見たけど細かく見てないです。とりあえずAjaxAPIに投げてその帰ってきた結果を表示してるんだなーって感じがなんとなく香ってきました(笑)

 

jQuery UIというのを使うようです。

jQuery オートコンプリート・入力補完インタフェースまとめ - Lowaivill Tech Blog

 

ただ、僕はいまAngularJSというのを勉強中で、教えてもらってる方に「jQueryは使うな」と言われているのでAngularJSでできるようにしたい(多分簡単にできる)