typeahead
http://qiita.com/oyahiroki/items/0d17451a835224189bce
基本
<!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 });});
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