2013年3月25日月曜日

[Twitter Bootstrap]typeaheadがせっかくサーバ側でソートした配列をソートし直しちゃう件への対処

[Twitter Bootstrap]typeaheadの項目をajaxで取得するコード例

上記の記事で紹介したajaxでの候補の取得方法だが、このままだと自分の場合ちょっとした問題がある。
サーバ側でどのように候補を検索するかというと、たいていSQLのセレクト文で抽出するはず。その際、order by句を使って、順序付けを普通はすると思う。

このようにせっかく順序付けをしてもブラウザ側でtypeaheadがご丁寧にソートしなおしてしまうのだ。

例えば、「ファ」と入力した段階だと、typeahedがサーバ側に「ファ」を送信。
サーバ側で、SQLで検索。select文にorder by句をつけて。
それで、「メンズファッション」「ファッション」という順番でjson形式のデータを返す。
これは、サーバ側のSQLのorder byでついた順序だ。

しかし、ブラウザ側でそのjsonをうけとったら、ご丁寧にもソートしなおしてくれて、「ファッション」「メンズファッション」という順番にしてしまう。
これは、マッチした部分が文字列の頭のほうにあるものが上に来るロジックらしい。

これを抑止するために以下のようにsorterオプションを、単純に受け取った配列をそのまま返すようなロジックで上書いたら、サーバ側でつけた順番どおりに「メンズファッション」「ファッション」と表示されるようになった。


$("#tagSelectInput").typeahead({
   source: function(query, process) {
      $.post($("#tagSelectInput").attr("data-url"), { 'data[Tag][content]': query}, function(data) {
         process(JSON.parse(data));
      });
   },
   sorter:function(items){
      return items;
   }
});

0 件のコメント:

コメントを投稿