ホーム サンプルコード一覧 8. Query Filter

8. Query Filter

実現される機能

アイテムの絞り込み検索を実現します。
検索対象となるアイテムはJSONファイルとして用意します。
入力された文字から、JSONデータの中の、各データを検索し、
マッチするものだけを表示します。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

組み込みデモ - ニュース一覧

ニュースの一覧をイメージしたデモです。
文字の入力に合わせ、ダイナミックにマッチするものだけを表示します。

組み込みデモ - フォルダ一覧

ディレクトリの一覧をイメージしたデモです。
上記同様、入力した文字が含まれるものだけが表示されます。

組み込みデモ - 商品一覧

商品画像の一覧をイメージしたデモです。
ページには表示されていませんが、JSONファイルが持っている文字列を検索対象にしています。

使用手順

この使用手順では、ニュース一覧のデモを例に取って解説します。

1. 依存ライブラリの読み込み

Query Filterが依存する、以下のライブラリを読み込みます。

<script src="[yourDirectoryHere]/jquery.min.js"></script>
<script src="[yourDirectoryHere]/underscore-min.js"></script>
<script src="[yourDirectoryHere]/backbone-min.js"></script>

Query Filter本体である jquery.refinesearcher.js を読み込みます。

<script src="[yourDirectoryHere]/jquery.refinesearcher.js"></script>

2. JSONPを返すAPIを用意

データをJSON形式で用意し、JSONPとしてこれを返すAPIを用意します。
このデータでは、itemsというキーに、アイテム群を格納した配列が指定されている必要があります。
例えば、ニュース一覧のデモで使用されているデータは、以下の様なものです。

{
  "items": [
    {
      "title": "東京に30年ぶりの大雪",
      "url": "http://example.com",
      "lead": "春も間近となった昨日、例年では考えられない量の雪が東京に降った。予想外の雪により多くの交通機関がマヒする事態となった。",
      "img": "../imgs/photos/1.png"
    },
    {
      "title": "日本経済 緩やかな回復",
      "url": "http://example.com",
      "lead": "経済アナリストの東京太郎氏によると、長く停滞している日本経済は緩やかな回復傾向にあるという。",
      "img": "../imgs/photos/2.png"
    },
    {
      "title": "表参道に初のコーヒーショップ開店",
      "url": "http://example.com",
      "lead": "昨日、アメリカ最大手コーヒーチェーンのアメリカーノコーヒーが表参道に日本初進出となるショップを開店した。",
      "img": "../imgs/photos/3.png"
    },
    ...(省略)
  ]
}

items内に格納する各要素は、どのようなデータを持っていても問題ありません。

3. 各要素を用意

以下の要素をページ内に用意します。
以下は、ニュース一覧のデモで用意したコードです。

1つのアイテムを表現するコード

以下の様に、テキストファイルのコンテナとしてのscript要素を用意し、
この中に、先ほどのデータにて、itemsに格納していたオブジェクトを表現するための
コードを用意します。

このコードは、Underscore.js_.templateを使ってコンパイルされます。

<script id="refineSearchListItemSrc" type="text/x-templateSrc">
  <li><a href="<%- url %>">
    <span class="img"><img src="<%- img %>" alt=""></span>
    <span class="text">
      <span class="title"><%- title %></span>
      <span class="lead"><%- lead %></span>
    </span>
  </a></li>
</script>

アイテムを格納するコンテナ

上記アイテムを格納するコンテナとなる要素を用意します。

<ul class="refineSearchList" id="refineSearchList"></ul>

検索フォーム

絞り込みの検索窓を用意します。

<form class="refineSearchForm" id="refineSearchForm" action="#" method="GET">
  <div class="inner">
    <div class="icon"></div>
    <div class="bd"><input type="text"></div>
  </div>
</form>

ローディング

読み込み中に表示する要素を用意します。

<div class="refineSearchLoading" id="refineSearchLoading"></div>

0件メッセージ

一件もマッチしなかった場合に表示する要素を用意します。

<div class="refineSearchNoResultsMsg" id="refineSearchNoResultsMsg">マッチする結果はありません</div>

4. Query Filterの適用

上記要素群がページ内に準備されている時、以下のようなコードを実行します。

window.su_refinesearcher.setup({
  dataUrl: '../json/news.json',
  selector_noResultsMsg: '#refineSearchNoResultsMsg',
  selector_loading: '#refineSearchLoading',
  selector_searchForm: '#refineSearchForm',
  selector_resultList: '#refineSearchList',
  keysToSearch: [ 'title', 'lead' ]
});

ここで指定しているのは、JSONPを返すAPIへのパスと、用意した各要素のセレクタ、
そして最後のkeysToSearchは、絞り込みの対象とするデータのキーです。
例えばこのように指定すると、データの中でitemsに格納した各オブジェクトの、
titleleadに指定された文字列を検索対象とします。

より細かい設定方法

見栄えを変更したい場合は、CSSを編集します。

その他

当スケルトンのディレクリ直下にあるjsonGeneratorは、当スケルトンにて使用するJSONPレスポンスのデータを手軽に作るためのツールが格納されたディレクトリです。Gruntで動作します。本スケルトンは、JSONPを返すダミーのAPIをPHPで作っています。