jQuery UI Autocompleteでかなを入力した際に漢字を表示

jQuery UI Autocompleteでかなを入力した際に漢字を表示する住所入力支援ような、対象表示する方法を紹介します。
なお、Autocomplete自体はjQuery 1.6.x 以降でないと動作しません。

住所：

読み込みと設定、実行

CSSファイルとJavaScriptファイルを読み込み、実装するHTMLを用意、データをセットして実行します。

【HTML : head】

<link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/jquery-ui.theme.min.css"> <script type="text/javascript" src="jquery1.4.2.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script>

【HTML : body】

<input type="text" name="address" value="" />

【JavaScript】

/* データの準備 */ var dataList = [ ['とうきょうとしんじゅくく', '東京都新宿区'], ['とうきょうとしながわく', '東京都品川区'], ['とうきょうとすぎなみく', '東京都杉並区'] ... ]; $(function() { /* input要素にオートコンプリートを適用 */ $('input[name=address]').autocomplete({ source : function(request, response) { var re = new RegExp('^(' + request.term + ')'), list = []; $.each(dataList, function(i, values) { if(values[0].match(re) || values[1].match(re)) { list.push(values[1]); } }); response(list); } }); });