JavaScript

【jQuery UI】Autocomplete機能で漢字かなをオートコンプリートの実装

jQuery UIのAutocompleteメソッドを利用すると、入力候補リストを表示して入力を補助するオートコンプリート（インスタンス検索）機能を実装することができます。

通常の利用例だと、候補文字に対して検索対象が一致しないと候補として表示されません。
そのため、漢字のみでオートコンプリート（インスタンス検索）機能を構築すると、入力途中のかなには反応せずに漢字変換した後に候補リストが表示され、ユーザーインターフェイスとしては理不尽な仕様となってしまいます。

例）
オートコンプリート機能を漢字のみ登録した都道府県をした場合、「ほ」と入力しても候補リストには挙がってこず、「北」と漢字入力して候補リストに挙がってきます。

今回構築したのは、オートコンプリート（インスタンス検索）機能の対象文字に対して「ふりがな」を検索対象に含めた実装です。
これを実装することで漢字やローマ字を対象とした文字に対しても「ふりがな」から候補リストが表示されます。

目次
  1. 1．準備
  2. ２．Autocompleteの設置
  3. このコードの仕組み
  4. デモ

1．準備

オートコンプリートを実装するためには、いくつかの準備が必要です。以下を確認してください。

＜前提条件＞
・FTPソフトが使用できること
サーバー上にファイルをアップロードするため、FTPソフトでファイルの作成や編集が行える環境が整っていることが必要です。

２．Autocompleteの設置

ファイル名: index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">


  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script><br>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script><br>


  <script type="text/javascript">

  var dataList = [
    ['北海道', 'ほっかいどう'],
    ['青森県', 'あおもりけん'],
    ['岩手県', 'いわてけん'],
    ['宮城県', 'みやぎけん'],
    ['秋田県', 'あきたけん'],
    ['山形県', 'やまがたけん'],
    ['福島県', 'ふくしまけん'],
    ['茨城県', 'いばらきけん'],
    ['栃木県', 'とちぎけん'],
    ['群馬県', 'ぐんまけん'],
    ['埼玉県', 'さいたまけん'],
    ['千葉県', 'ちばけん'],
    ['東京都', 'とうきょうと'],
    ['神奈川県', 'かながわけん'],
    ['新潟県', 'にいがたけん'],
    ['富山県', 'とやまけん'],
    ['石川県', 'いしかわけん'],
    ['福井県', 'ふくいけん'],
    ['山梨県', 'やまなしけん'],
    ['長野県', 'ながのけん'],
    ['岐阜県', 'ぎふけん'],
    ['静岡県', 'しずおかけん'],
    ['愛知県', 'あいちけん'],
    ['三重県', 'みえけん'],
    ['滋賀県', 'しがけん'],
    ['京都府', 'きょうとふ'],
    ['大阪府', 'おおさかふ'],
    ['兵庫県', 'ひょうごけん'],
    ['奈良県', 'ならけん'],
    ['和歌山県', 'わかやまけん'],
    ['鳥取県', 'とっとりけん'],
    ['島根県', 'しまねけん'],
    ['岡山県', 'おかやまけん'],
    ['広島県', 'ひろしまけん'],
    ['山口県', 'やまぐちけん'],
    ['徳島県', 'とくしまけん'],
    ['香川県', 'かがわけん'],
    ['愛媛県', 'えひめけん'],
    ['高知県', 'こうちけん'],
    ['福岡県', 'ふくおかけん'],
    ['佐賀県', 'さがけん'],
    ['長崎県', 'ながさきけん'],
    ['熊本県', 'くまもとけん'],
    ['大分県', 'おおいたけん'],
    ['宮崎県', 'みやざきけん'],
    ['鹿児島県', 'かごしまけん'],
    ['沖縄県', 'おきなわけん']
  ];


  function split( val ) {
      return val.split( / \s*/ );
  }
  function extractLast( term ) {
      return split( term ).pop();
  }

  jQuery(function(){  
    jQuery('#autocomplete_search').autocomplete({
      source: function(request, response){
        var suggests = [];
        var regexp = new RegExp('(' + extractLast(request.term) + ')', 'i'); // 全角半角区別無し(i)
        
        console.log(regexp);
        jQuery.each(dataList, function(i, values){
          if(values[0].match(regexp) || values[1].match(regexp)){
            suggests.push(values[0]);
          }
        });
        
        response(suggests);
      },
      focus: function() {
          return false;
      },
      select: function( event, ui ) {
          var terms = split( this.value );
          terms.pop();
          terms.push( ui.item.value );
          terms.push( "" );
          this.value = terms.join( " " );
          return false;
      },
      autoFocus: true,
      delay: 300,
      minLength: 1
    });
  });
  </script>

  </head>

  <body>

    <h3>インスタンス検索（Autocomplete）</h3>
    <input id="autocomplete_search" type="search" placeholder="キーワード" size="100" maxlengh="50" />
    
  </body>

</html>

このコードの仕組み

このプログラムは、都道府県の名前をオートコンプリート（入力補完）する機能を提供します。以下に仕組みを詳細に説明します。

プログラムの構造

  1. HTML構造:
    • <!doctype html>でHTML5を宣言。
    • <head>にて必要なCSSとJavaScriptライブラリをインクルード。
      • jQuery（3.6.0）とjQuery UI（1.13.2）を使用。
    • <body>に検索バー（<input id="autocomplete_search">）を配置。
  2. データ定義:
    • dataList配列に都道府県名（漢字）とその読み仮名（ひらがな）が格納されています。
  3. オートコンプリート機能の実装:
    • jQuery UIのautocompleteウィジェットを使い、検索入力時に補完候補を提供します。

コードの詳細説明

1. 補助関数

javascriptコードをコピーするfunction split( val ) {
    return val.split( / \s*/ );
}
function extractLast( term ) {
    return split( term ).pop();
}
  • split(val): 入力文字列を空白で分割して配列を返します。
  • extractLast(term): 入力文字列の最後の要素を取得します（オートコンプリート対象のキーワードを取得）。

2. オートコンプリート設定

javascriptコードをコピーするjQuery('#autocomplete_search').autocomplete({
  source: function(request, response) {
    var suggests = [];
    var regexp = new RegExp('(' + extractLast(request.term) + ')', 'i');
    
    jQuery.each(dataList, function(i, values) {
      if(values[0].match(regexp) || values[1].match(regexp)) {
        suggests.push(values[0]);
      }
    });
    
    response(suggests);
  },
  focus: function() {
      return false;
  },
  select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(" ");
      return false;
  },
  autoFocus: true,
  delay: 300,
  minLength: 1
});
(1) source
  • 目的: 補完候補の生成。
  • request.term: 入力中の文字列。
  • response(suggests): 候補のリストをウィジェットに送る。
  • extractLast(request.term)を利用して、入力文字列の最後の単語を抽出し、それを正規表現regexpに変換。
  • dataListをループして、漢字（values[0]）またはひらがな（values[1]）のいずれかが正規表現に一致する場合に候補に追加。
(2) focus
  • 候補を選択時に入力欄の値を変更しない。
(3) select
  • 目的: 候補を選択した際に入力欄を更新。
  • split()で入力欄を分割し、選択した値を追加。
  • 入力欄の文字列を更新して返却。
(4) その他の設定
  • autoFocus: true: 候補リストの最初の項目を自動的に選択。
  • delay: 300: 入力後300msの遅延で候補生成。
  • minLength: 1: 入力文字列が1文字以上で補完機能が動作。

具体的な動作

  1. ユーザー入力:
    • 検索バーに「とうきょう」や「ほっ」と入力すると即座に候補を提示。
    • dataList内の漢字またはひらがなに部分一致する場合、候補リストに追加。
  2. 候補リストの選択:
    • 矢印キーまたはクリックで候補を選択。
    • 選択した都道府県名が入力欄に反映。
  3. 正規表現の利用:
    • 検索に全角/半角の区別をなくし、ケースインセンシティブ（大文字小文字区別なし）にマッチ。

デモ

コチラ

デモの不具合や質問等の連絡はお問い合わせページからお願いします。

最近の記事

  1.

    【PHP】CSVエクスポート機能

  2.

    input入力フォームを連動させる③（ select + select ）

  3.

    input入力フォームを連動させる②（ radio + select ）

技術投稿

PAGE TOP