【JQuery UI】autocompleteの使い方 - 中の下の上の真ん中あたり

注意

とりあえず動くけど方法的に正しいかは知らない。

はじめに

JQueryとJQuery UIを読み込む。

<!-- head内 -->
<link type="text/css" rel="stylesheet"
    href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<!-- 文末 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

使い方(文字配列)

配列を表示させたいとき。

// id: inputform に 配列arr を適用する
$(function() {
    var arr = ["pokemon", "pso2", "bms", "IIDX"];
    $("#inputform").autocomplete({
         source: arr,
    });
});

普通に source: arr と指定してやればいける

使い方(Object配列)

ここからが本題。
Object配列を表示させたい場合、そのObjectにlabelプロパティとvalueプロパティがある必要がある。
すなわち、元からlabelとvalueを持ってる場合なら

$(function() {
    var obj_arr = [
        { value: "pokemon", label: "pocket monster", priority: 3 },
        { value: "pso2", label: "phantasy star online 2", priority: 2 },
        { value: "bms", label: "be music script", priority: 5 },
    ];
    $("#inputform").autocomplete({
         source: obj_arr,
    });
});

とすれば動く。
labelとvalueを持ってないなら、

$(function() {
    var obj_arr = [
        { srt: "pokemon", full: "pocket monster", priority: 3 },
        { srt: "pso2", full: "phantasy star online 2", priority: 2 },
        { srt: "bms", full: "be music script", priority: 5 },
    ];
    $("#inputform").autocomplete({
         source: function (req, resp) {
             resp($.map(obj_arr, function (value, key) {
                if (value.full.indexOf(req.term) >= 0) {
                    return {
                        label: value.full,
                        value: value.srt,
                        data: value,
                    };
                }
            }));
        },
    });
});

てな感じで、labelとvalueプロパティを持ったものを新しく作って無理やり。
req.termに条件文字列が入ってるのでラベル文字列(この場合はvalue.full)の中に含まれているかどうか確認し、含まれてたら表示用のObjectを作る。

選択時の処理

selectプロパティに記載する。
文字配列の場合は公式サンプルを見ればいいのでここにはObject配列の時だけ書いておく。

$(function() {
    var obj_arr = [
        { srt: "pokemon", full: "pocket monster", priority: 3 },
        { srt: "pso2", full: "phantasy star online 2", priority: 2 },
        { srt: "bms", full: "be music script", priority: 5 },
    ];
    $("#inputform").autocomplete({
         source: function (req, resp) {
             // 上と同じなので省略
        },
         select: function (e, d){
              var data = d.item.data;
              // 取り出したdataを使って処理をする
              return false;
         }
    });
});

sourceのところにlabel, valueとともにdataを置いておいたのはここで使うため。

候補表示をカスタマイズ

こんな感じのコードを足す。

$(function() {
    var obj_arr = [
        { srt: "pokemon", full: "pocket monster", priority: 3 },
        { srt: "pso2", full: "phantasy star online 2", priority: 2 },
        { srt: "bms", full: "be music script", priority: 5 },
    ];
    $("#inputform").autocomplete({
        // さっきと一緒
    })
    .autocomplete("instance")._renderItem = function (ul, d) {
        var data = d.item.data; // selectの時と同じ
        return $("<li>")
            .append(/* ここにカスタマイズ用のHTMLを記述する */)
            .appendTo(ul);
    };
});

コメントの部分に中の要素を書いていく。この時要素のデータを使いたいならselectの時と同様d.item.dataからアクセスすればよい。
これだけだと不格好なのでcssで調理する。

.ui-autocomplete /*要素*/ {
    /* 適当に */
}

候補一覧にスクロールバーを付けたい

CSSでやる。

.ui-autocomplete{
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: scroll;
}

overflow-yの値はscrollかautoでお好みに合わせて。

候補が出てくる最低限の文字数を多くしたい

$("#inputform").autocomplete({
    minLength: 3, // 三文字以上入力すると候補が出てくる
});

実行例

JS Bin - Collaborative JavaScript Debugging

参考文献

とりあえずここ見たほうが早い気もする。
公式API Documentation(英語)
API日本語説明