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

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

使い方

まずはcdnから読み込みます。typeaheadと、bloodhoundというサジェストエンジンを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.js" type="text/javascript"></script>

次に、inputタグなどを用いて、入力フォームを作ります。
今回は、”testclass”というクラス名を適用させた入力フォームを作ります。

<input type="text" class="testclass" name="test>

JavaScriptを書きます。listにサジェストさせたい語彙を入れれば、ここからサジェストしてくれます。

const list = ["いぬ", "ねこ","あひる","さる"]; 
const suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: list, 
}); 

//.testclassに対象のクラス名を入れます。 
$('.testclass').typeahead(
{ 
    hint: true, 
    highlight: true, 
    minLength: 1 
}, { 
    name: 'suggestions', 
    source: suggestions 
});

こうすることで、例えばDjangoのviewから、サジェストさせたい語句をリストとして渡し、動的にlistを吐き出すことも可能です。

var list = ["いぬ", "ねこ","あひる","さる"] #これをviewからテンプレートに渡す

テンプレート側では

{% for element in list %}  "{{ element }}",  {% endfor %}

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Back to Top