Press Enter/Return to start Search

検索サジェスト（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などを介してやったほうがいいような気はします。いい方法があったらご教授いただければ幸いです。

Back to Top