EasyAutocompleteでAjax版autocompleteを実装しました

select2で大量のデータをセットしたら重くて使い物にならなかったので、EasyAutocompleteでautocompleteを実装しました。

EasyAutocomplete - jQuery autocomplete plugin

1. HTMLを用意

<link rel="stylesheet" href="easy-autocomplete.min.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.easy-autocomplete.min.js"></script>
～省略～
<input type="text" id="js-autocomplete" class="form-control">
<ul class="list-group" id="js-input"></ul>

※テーマは使用しないので、テーマ用のCSSは読み込みません。

2. APIを用意

名前をLIKE検索するようなAPIを実装します。

$model = new Model();

// パラメータ取得
$name = $_POST['phrase'];

// DBから取得
$users = $model->getByName($name);
/*
データ形式
$users = [
    ['name' => 'JAMES'],
    ['name' => 'JOHN'],
    ['name' => 'ROBERT'],
]
*/

$response = $users;

//jsonとして出力
header('Content-type: application/json');
echo json_encode($response);

3. フロント実装

var options = {
    url: function(phrase) {
        return 'api.php';
    },
    getValue: function(element) {
        return element.name;
    },
    list: {
        onClickEvent: function() {
            var selectedItemData = $("#js-autocomplete").getSelectedItemData();
            $("#js-input").append('<li class="list-group-item">' + selectedItemData.name + '</li>');// 候補をクリックすると、リストに追加されていきます。
            $('#js-autocomplete').val('');// リストに追加したら、入力フォームを空欄に戻します。
        },
        maxNumberOfElements: 20,// 候補を表示する最大件数です。
    },
    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: {
            dataType: "json"
        }
    },
    preparePostData: function(data) {
        data.phrase = $("#js-autocomplete").val();// phraseというキーでAPIにデータをPOSTします。
        return data;
    },
    requestDelay: 400,// 文字を入力中に何度もAPIにデータをPOSTしてしまうので、ミリ秒遅延させます。
    placeholder: "名前を入力してください"
};

$("#js-autocomplete").easyAutocomplete(options);

4. CSS調整

bootstrapを併用している影響か、入力フォームが広くならなかったので調整しました。

.easy-autocomplete{
  width:100% !important
}

.easy-autocomplete input{
  width: 100%;
}