Posted at

JQueryで自動補完

More than 3 years have passed since last update.


概要

Google検索などでよく使われるAutocompleteをjQueryのAutocomponentで実現します。サジェストする内容に関してはAjaxでGETして取ってきます。


実装手順

以下の手順で実装していきます。

1. jQuery Autocompleteを静的コンテンツにて実装

2. 静的コンテンツ部分をAjaxで入力した内容に応じて取ってくる


JQuery Autocompleteの実装


autocomplete.html

// 以下3ファイルを読み込みます。

<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部分の消去の2点を行いました。

これで動的に表示されるデータが変わります。


参考