読者です 読者をやめる 読者になる 読者になる

修行@ホーチミン

ホーチミン長期出張の日記です

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

準備

 

jQuery UI

Download Builder | jQuery UI

ここから Theme ⇒ [UI lightness] を選択してダウンロードしました。

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

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

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

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

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

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

PythonFront

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);を渡してます。

 

PythonFront

いままの検索やら更新やらではPythonFrontをかませていたので、無難に今回も最終的なレスポンスがシンプルに下記のような返却になるようPythonをかませましたが、APIに直リクエストはNG..?

ここは経験不足から判断できませんでした..。

 

最終的なレスポンス

{ 
    "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"
    ]
}

 

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から返却されるホテル名のリストです。

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

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

 

確認

 

f:id:bebe0909:20160929183928p:plain

 

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

ちなみに都市選択時は、まだサンプルデータにバラエティがないので寂しいかんじです。

 

f:id:bebe0909:20160929184645p:plain

 

 

p.s. 風邪引きました..。