検索サジェスト(typeahead)の使い方

Webサイトを作っていて、でタグ検索などをすることはよくあると思います。そんな際に、これまでのタグのサジェストができればなと思うことはよくあるかと思います。そんな際に便利なのがtypeaheadというJavaScriptのプラグインです。

使い方

  1. まずはcdnから読み込みます。typeaheadと、bloodhoundというサジェストエンジンを読み込みます。
  2. inputタグなどを用いて、入力フォームを作ります。
    今回は、”testclass”というクラス名を適用させた入力フォームを作ります。
  3. JavaScriptを書きます。listにサジェストさせたい語彙を入れれば、ここからサジェストしてくれます。
  4. 例えばDjangoのviewから、サジェストさせたい語句をリストとして渡し、動的にlistを吐き出すことも可能です。

    テンプレート側では

    このようなこともできそうです。要素が増えた際にはJSONなどを介してやったほうがいいような気はします。いい方法があったらご教授いただければ幸いです。

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA


Back to Top