Zenn
🕵️‍♂️

【JQuery UI】AutoCompleteによるサジェスト機能の実装

2022/04/24に公開
CSS
HTML
JavaScript
jQuery
tech

サジェスト機能が簡単に実装できることがわかったので勉強してみた。

簡易版

sourceオプションにワードを指定するだけ。

検索の仕様（デフォルト）

  • 部分一致検索
  • 大文字／小文字区別なし
  • 候補数の上限なし
  • 必要な文字数：1文字

カスタマイズ１）前方一致検索に変更したい

sourceオプションに関数が書けるので任意にfilterできる。
大文字／小文字区別したい場合は、toLowerCase()の条件を外せばよい。

$("#keyword").autocomplete({
    source: function (request, response) {
      let list = [];
      list = words.filter(function (word) {
        return (
          word.indexOf(request.term) === 0 || // 前方一致検索
          word.toLowerCase().indexOf(request.term) === 0 // 大文字／小文字区別なし
        );
      });
      response(list);
    }
  });

カスタマイズ２）候補数の上限を絞りたい

配列を返しているだけなので渡す値を制限すればよい。

source: words.slice(0, 6)

カスタマイズ３）リンク先を設定する

ワードにurl要素を増やし、select( event, ui )を使えばよい。

let words = [
    {
        label: "テスト",
        url: "https://www.google.com/search?q=テスト"
    }
select: function (event, ui) {
    location.href = ui.item.url;
    return false;
}

色々経て・・・

今後はajaxを用いたソース取得を実施したい。

参考URL：

https://api.jqueryui.com/autocomplete/

Discussion