概要
Google検索などでよく使われるAutocompleteをjQueryのAutocomponentで実現します。サジェストする内容に関してはAjaxでGETして取ってきます。
実装手順
以下の手順で実装していきます。
- jQuery Autocompleteを静的コンテンツにて実装
- 静的コンテンツ部分をAjaxで入力した内容に応じて取ってくる
JQuery Autocompleteの実装
autocomplete.html
// 以下３ファイルを読み込みます。
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
続いて以下のJSを作成します。要素でformのIDを指定してください。
autocomplete.js
$(function(){
var data = [
'sample1',
'sample2',
'sample3',
'sample4'
];
$('#input_form_id_here').autocomplete({
source: data,
autoFocus: true,
delay: 500,
minLength: 2
});
});
この状態でフォームにsampleと入力すると下に候補でdata変数の中身がでてきます。これで基本形は完成です。続いて、source部分で読み込む部分をajaxを使用して動的に変えていく処理を書いていきます。
proposalを動的にする
表示する内容を動的にするためにautocomplete.jsを書き換えていきます。
autocomplete.js
$(function(){
$('#input_form_id_here').autocomplete({
source: function( req, res ) {
$.ajax({
url: "http://example.com/autocomplete/" + encodeURIComponent(req.term),
dataType: "json",
success: function( data ) {
res(data);
}
});
},
autoFocus: true,
delay: 500,
minLength: 2
});
});
sourceの部分の書き換え、data部分の消去の２点を行いました。
これで動的に表示されるデータが変わります。