jQuery UI でオートコンプリート

準備

jQuery UI

上記URLより　Theme ⇒ [UI lightness] を選択してダウンロードしました。

その中の下記2ファイルを利用

• jquery-ui.js
• jquery-ui.css

オートコンプリート用のAPI

SpringBootを使って、下記のようなAPIを追加

リクエスト：「検索文字列・検索対象」

レスポンス：「検索結果のリスト」

Python/Jinja2

Pythonを経由して、データのValidationや加工を行えるようにする。
※　検証用にこのような構成にしています。

内容

API仕様

target には検索条件を、query には入力中の文字が入る想定です。

たとえば、下記のようなリクエスト「Hotel name」が「R」から始まるホテル名といったリクエストを投げると

{
  "header": {
    "countryCode": "US",
    "currencyCode": "USD",
    "languageCode": "en",
  },
  "body": {
    "query": "R",
    "target": "name"
  }
}

こんな感じで、ホテル名のリストが返却されます。

{
  "status": 200,
  "header": {
    "languageCode": "en",
    "countryCode": "US",
    "currencyCode": "USD",
    "userAgent": "string",
    "userIp": "string"
  },
  "body": {
    "results": [
      "Royal Park Hotel",
      "Richmond Hotel Higashi Osaka",
      "Ryokan Mikawaya",
      "RIHGA Royal Hotel Osaka",
      "Refre Forum",
      "Richmond Hotel Nagoya Nayabashi",
      "Richmond Hotel Premier Asakusa International"
    ]
  }
}

単純にServiceクラスでターゲットを判断して、下記のクエリを実行してます。

@Query("select name from Hotel h where h.name like :name% and h.deleteFlag=0")
public List<String> findHotelName(@Param("name") String name, Pageable pageable);

@Query("select distinct cityCode from Hotel h where h.cityCode like :cityCode% and h.deleteFlag=0")
public List<String> findCityCode(@Param("cityCode") String cityCode, Pageable pageable);

Pageable は 最大10件表示にするために引数にnew PageRequest(0, 10);を渡してます。

Python

PythonでAPIのレスポンスを加工して、最終的に下記のようにホテル名リストがレスポンスとして返るようにする。

{ 
    "results": [
        "Royal Park Hotel",
        "Richmond Hotel Higashi Osaka",
        "Ryokan Mikawaya",
        "RIHGA Royal Hotel Osaka",
        "Refre Forum",
        "Richmond Hotel Nagoya Nayabashi",
        "Richmond Hotel Premier Asakusa International"
    ]
}

Jinja2

 <input type="text" class="form-control" id="query" name="query" value="{{data.query}}">

上記inputタグでオートコンプリートを実現する。

jQuery UI

$("#query").autocomplete({
    source: function(req, resp){
        $.ajax({
            url: "/hotel/auto_complete",
            type: "POST",
            cache: false,
            dataType: "json",
            data: {
                query: req.term, 
                target : $('#searchBy').val()
            },
            success: function(response){
                resp(response.result);
            },
            error: function(xhr, ts, err){
                resp(['']);
            }
        });

    }
});

req.term はユーザが入力した文字です。

$('#searchBy').val() は、検索方法のselectBoxのvalueを取得してます。

response.result は、最終的にPythonから返却されるホテル名のリストです。

そのリストをautocomplete の source: に渡すと動きます。

ライブラリを使うと本当に簡単に機能追加できてしまいます。

確認

時間差もなくすぐに表示されました。