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

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