More than 5 years have passed since last update.

jQuery Typeahead あれこれ

Last updated at 2016-11-28Posted at 2016-11-28

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

基本


<!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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up