テキストファイルで作る オートコンプリート jQueryプラグイン

オートコンプリートを簡単に実装できるjQueryプラグイン

jquery.autocomplete.js

を使ってみた。

設置は非常に簡単。

html


&lt;input type="text" id="autocomplete-ajax"/&gt;
&lt;script type="text/javascript" src="js/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mockjax.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.autocomplete.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/demo.js"&gt;&lt;/script&gt;

css


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;
}

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の中身)


$(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);
            }
        });

    });

});

$(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や拡張子は変更可能だが、形式は以下のようにする必要がある。


{
	"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!",
}