Autocomplete widget – jQueryとJSONデータで都市・国名を自動補完で入力する –

jQueryで自動入力補完機能を作る

こんにちは、Soyです。

jQueryのライブラリを使用して、JSONデータから都市・国名を自動補完入力してくれるツールを作成しました。

GitHubはこちらです▼

https://github.com/soybelln/autocomplete.git

デモサイトはこちらです▼

Autocomplete by using jQuery

Step1:jQuery UIを読み込む

<head></head>の中に、jQuery UIを読み込みます。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

バージョンが変わっているかもしれないので、公式サイトで確認してください。

Step2:データを用意する

都市・国名に限らず、何でもいいのでJSON形式のデータを用意します。

今回は、「major city list json」と検索して出てきたものを利用しました。

データはこんな形になっています▼

[
  {
    "city": "Kyoto",
    "country": "Japan"
  },
  {
    "city": "Berlin",
    "country": "Germany"
  },
  {
    "city": "Florence",
    "country": "Italy"
  },
  .
  .
  .
]

このファイルの拡張子をjsに変更します。そして、変数の中に入れましょう。

let city = [
  {
    "city": "Kyoto",
    "country": "Japan"
  },
  {
    "city": "Berlin",
    "country": "Germany"
  },
  {
    "city": "Florence",
    "country": "Italy"
  },
  .
  .
  .
];

Step3:input要素を取得する

入力補完させたいinputタグをjsファイルで取得します。idかclassを指定しましょう。

HTML

<input id="city" type="text">
JavaScript

$("#city").autocomplete({
    //ここにオプションを書いていく  
});

Step4:オプションにデータを入れる

データは「source」オプションに入れます。

公式サイトの例

$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

このように、配列を入れるのが一番簡単です。しかし今回は、JSON → オブジェクトのデータです。

$("#city").autocomplete({
  source: function (request, response) {
    response($.map(area, function (obj, key) { //areaデータの全ての要素に対して次の処理を行う

      var city = obj.city; // Kyoto, Berlin, Florence......

      if (city.indexOf(request.term) != -1) {
        return {
          label: obj.city + ", " + obj.country, 
          value: obj.id 
        }
      } else {
        return null;
      }
    }));
  }
});

sourceのfunctionは、request(inputにユーザーが入力した文字)とresponse(ユーザーに提示するデータ)を引数としています。

responseには、先ほど用意したareaデータが使用されます。map()メソッドにより、areaデータの全ての要素に対して次に記述される処理を行います。

if文の中を見てみましょう。

areaデータのcityにindexOf()メソッドを使用し、!= -1ならデータを返し、==1ならnullを返しています。

indexOf()メソッドは、引数に与えられた内容と同じ内容を持つ配列要素の順番を返します。1つ目に存在していたら0、3つ目に存在していたら2が返ってきます。

そして、該当の要素がないときには-1を返します。

request.termのtermは、ユーザーが1文字入力するごとに何を入力したかAutocompleteが判断するためのものです。

Step5:あとは文字列の値に従って追記する

今回は、areaデータのすべての都市名が大文字から始まっています。

そのため、ユーザーが小文字を入力した最初の1文字を大文字に変える処理を追記しました。

他にも、日本語の場合やひらがなから漢字を予測する場合にも別途工夫が必要です。

必要な条件ごとにアレンジしてみましょう。

余談……

実はこの機能をReactと一緒に使おうと思っていろいろ試していたのですが、候補のリストから選択したものをvalueに置き換えることができず、onChangeが発動しませんでした。(onInputはinputイベントとは違うのかな?)

その結果、stateが入力時の値(bでBerlinを選んでもstateにはbしかセットされない)になってしまい無意味なことに。

autocompleteはreact用のライブラリもあるようなので今度はそちらを試します。

このブログは供養用(笑)。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)