2013/02/07
テキストファイルで作る オートコンプリート jQueryプラグイン
オートコンプリートを簡単に実装できるjQueryプラグイン
jquery.autocomplete.js
を使ってみた。
設置は非常に簡単。
html
|
1 2 3 4 5 | <input type="text" id="autocomplete-ajax"/> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.mockjax.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> <script type="text/javascript" src="js/demo.js"></script> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | body { padding-top: 20px; background-color: #eaf1f4; font-size: 70%; } #box { width: 403px; margin: auto; } input { width: 100%; font-size: 28px; padding: 10px; border: 1px solid #CCC; display: block; margin: 20px 0; } /* 自動で出てくるコンプリートボックスのスタイル */ .autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } |
js (demo.jsの中身)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $(function () { $.ajax({ url: 'data/beatles.txt', dataType: 'json' }).done(function (source) { var countriesArray = $.map(source, function (value, key) { return { value: value, data: key }; }), countries = $.map(source, function (value) { return value; }); $.mockjax({ url: '*', responseTime: 200, response: function (settings) { var query = settings.data.query, queryLowerCase = query.toLowerCase(), suggestions = $.grep(countries, function(country) { return country.toLowerCase().indexOf(queryLowerCase) !== -1; }), response = { query: query, suggestions: suggestions }; this.responseText = JSON.stringify(response); } }); $('#autocomplete-ajax').autocomplete({ serviceUrl: '/autosuggest/service/url', onSelect: function(suggestion) { $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data); } }); }); }); |
3行目：jqueryデフォルトのajax関数のurlでテキストファイルを取得
→ urlや拡張子は変更可能だが、形式は以下のようにする必要がある。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "001":"アクロス・ザ・ユニバース - Across the Universe", "002":"エイント・シー・スイート - Ain't She Sweet", "003":"オール・アイヴ・ゴット・トゥ・ドゥ - All I've Got to Do", "004":"愛こそはすべて - All You Need Is Love", "005":"アンド・ユア・バード・キャン・シング - And Your Bird Can Sing", "006":"アンナ - Anna (Go to Him)", "007":"エニイ・タイム・アット・オール - Any Time at All", "008":"アスク・ミー・ホワイ - Ask Me Why", "009":"ベイビー・イッツ・ユー - Baby It's You", "010":"ベイビー・ユーアー・ア・リッチ・マン - Baby You're a Rich Man", "011":"バッド・ボーイ - Bad Boy", "012":"ビーイング・フォー・ザ・ベネフィット・オブ・ミスター・カイト - Being for the Benefit of Mr. Kite!", } |
あとは29行目でターゲットを指定すれば、jsonの内容と入力内容がマッチすればオートサジェストされる。
ECサイトやブログサイトなどで、検索ワードをDB化してjsonにして利用することもできるので便利と思いました。
Author Profile
SHARE
