簡単にautocompleteが実装できる「EasyAutocomplete」

テキストボックスに文字を入力したら候補が表示されるautocompleteといえば、jQueryUIのAutocompleteが有名です。
でもjQueryUIはほかにもいろいろなWidgetsのスクリプトが書かれてたりするので意外と重かったりします。
今回はautocompleteだけのライブラリEasyAutocompleteを紹介しようと思います。

実装方法

ダウンロード

公式サイトのダウンロードページか、GitHubからzipファイルをダウンロードしてください。
zipファイルを展開して、jquery.easy-autocomplete.min.js、easy-autocomplete.min.cssを適当なディレクトリに配置してください。

コード

jQuery本体とEasyAutocompleteのファイルを読み込みます。

<!-- jQuery本体 -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<!-- EasyAutocompleteのJS -->
<script src="jquery.easy-autocomplete.min.js"></script> 

<!-- EasyAutocompleteのCSS -->
<link rel="stylesheet" href="easy-autocomplete.min.css"> 

検索用のテキストボックスを記述します。

<input type="text" id="search_text" />

入力した文字が含まれているデータのみ表示されるように、検索用のスクリプトを記述します。

var options = {
    //検索候補の配列
    data: ["blue", "green", "pink", "red", "yellow"],

    //表示されるデータに関する設定
    list: {
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

//autocompleteを実装
$("#search_text").easyAutocomplete(options);

[btn class=”rich_pink”]デモ確認[/btn]

検索候補のデータはJsonファイルやXMLファイルにも対応しています。

Jsonファイルの読み込み

color.jsonファイルを作ります。

[
    {"name":"blue","code":"#0000ff" },
    {"name":"green","code":"#008200"}, 
    {"name":"pink","code":"#f1c8c7"},
    {"name":"red","code":"#ff0000"},
    {"name":"yellow","code":"#F7E741"}
]

ファイルを読み込むスクリプトを記述します。

var options = {
    //jsonファイルのパスを記述
    url: "color.json",
    //jsonのどのパラメータを見るか記述
    getValue: "name",
    //表示されるデータに関する設定
    list: {
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

//autocompleteを実装
$("#search_text").easyAutocomplete(options);

[btn class=”rich_pink”]デモ確認[/btn]

getValueは文字列以外にもfunctionを設定することもできます。

var options = {
    //jsonファイルのパスを記述
    url: "color.json",
    //jsonのどのパラメータを見るか記述(function版）
    getValue: function(element){
        return element.name;
    },
    //表示されるデータに関する設定
    list: {
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

//autocompleteを実装
$("#search_text").easyAutocomplete(options);

候補が選択されたときのイベントを取得する

表示された候補をクリックしたときのイベントも取得することができます。
listのパラメータの中にonClickEvent:function()を記述することでクリックイベントを取得できます。

var options = {
    //jsonファイルのパスを記述
    url: "color.json",
    //jsonのどのパラメータを見るか記述(function版）
    getValue: function(element){
        return element.name;
    },
    //表示されるデータに関する設定
    list: {
        //クリックイベント取得
        onClickEvent:function(){
            alert('クリックされた!');
        },
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

[btn class=”rich_pink”]デモ確認[/btn]
上記のコードはクリック時のイベントなので、検索候補が出たときにキーボードの上下で選択したときはイベントが発火しません。
キーボードの上下移動に対応する場合はonSelectItemEvent: function()で対応できます。

var options = {
    //jsonファイルのパスを記述
    url: "color.json",
    //jsonのどのパラメータを見るか記述(function版）
    getValue: function(element){
        return element.name;
    },
    //表示されるデータに関する設定
    list: {
        //セレクトイベント
        onSelectItemEvent:function(){
            //alertを使うと無限ループみたいになるので、console.log
            console.log('選択された！');
        },
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

[btn class=”rich_pink”]デモ確認[/btn]

選択した候補のデータを受け取る

onClickEventやonSelectItemEventn内では「何番目のデータを取得したのか」といったインデックスを取得することができます。
またデータがjsonなどオブジェクトだった場合は、選択されたオブジェクトのデータも取得できます。
インデックスを取得する場合はgetSelectedItemIndex()を、
オブジェクトを取得する場合はgetSelectedItemData()を使います。

var options = {
    //jsonファイルのパスを記述
    url: "color.json",
    //jsonのどのパラメータを見るか記述(function版）
    getValue: function(element){
        return element.name;
    },
    //表示されるデータに関する設定
    list: {
        //セレクトイベント
        onSelectItemEvent:function(){
            //インデックスを取得
            console.log("index:"+$("#search_text").getSelectedItemIndex());
            //オブジェクトのデータを取得
            //{"name":"xxx","code":"xxxx"}のcodeを取得する場合
            console.log("code:"+$("#search_text").getSelectedItemData().code);
        },
        match: {
            //入力した文字が含まれているデータのみ表示
            enabled: true
        }
    }
};

[btn class=”rich_pink”]デモ確認[/btn]