Edited at

jQuery Typeahead あれこれ

More than 1 year has passed since last update.

データの指定方法がいくつかあるのでメモ。

基本


<!DOCTYPE html>
<head>
<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>
<script type="text/javascript">

$(function() {
// ここに定義
});
</script>
</head>

<body >

<label for="txtKeywd">キーワード</label>
<input id="txtKeywd" type="search" size="20" maxlengh="50" />

</body>
</html>

データをURLで指定する

$(function() {

$('#txtKeywd').autocomplete({
source: 'my/method.wss',
autoFocus: true,
delay: 100,
minLength: 1
});
});

データを配列で指定する


$(function() {
$('#txtKeywd').autocomplete({
source: [
'AAA', 'BBB', 'CCC', 'XXX', 'YYY', 'ZZZ'
],
autoFocus: true,
delay: 100,
minLength: 1
});
});

データを関数で指定する

function myFunction(req, resp){

resp([ 'AAA', 'BBB', 'CCC', 'XXX', 'YYY', 'ZZZ']);
}
$(function() {
$('#txtKeywd').autocomplete({
source : function(req, resp){myFunction(req,resp);},
autoFocus: true,
delay: 100,
minLength: 1
});
});

データを関数で指定する(2)

function myFunction(req, resp){

resp([ {'label':'AAA','value':'vAAA'},{'label':'BBB','value':'vBBB'} ]);
}
$(function() {
$('#txtKeywd').autocomplete({
source : function(req, resp){myFunction(req,resp);},
autoFocus: true,
delay: 100,
minLength: 1
});
});

参考にしたURL

http://www.buildinsider.net/web/jqueryuiref/0019

http://jquery.keicode.com/ui/autocomplete.php