bootstrap tagsinput と typeahead.js で予測機能つきのタグ入力ボックスを作る

他の人がどんな入力をしたかを確認しつつ、ユーザーがタグを登録できたら使い勝手が良いと思って調べてみた。

qiita.com を参考に、

typeahead.jsは以下のバージョン0.9.3を使用。 Kingboard/typeahead.js at master · Kingboard/Kingboard · GitHub

CSSは以下を使用。

GitHub - jharding/typeahead.js-bootstrap.css: DEPRECATED

<input type="text" name="name">

<script>
$(function() {
  return $('.tagsinput').typeahead({
    name: 'names',
    local: ["斉藤", "斉木", "大野", "大原"],
    limit: 10
  });
});
</script>

のようにシンプルな入力ボックスだと動くが、 なぜかgem “act_as_taggable_on” , “tagsinput” と組み合わせて

<%= text_field_tag  user[item_list], @user.item_list.join(',') ,"data-role": "tagsinput", "id": "user_item_tags", :placeholder => "アイテムを入力
    ", class:"tagsinput" %>

だと動かない。なぜだろう？と思って、生成されたhtmlを見ていたら、

  <div class="bootstrap-tagsinput">
    <span class="twitter-typeahead">
      <input class="tt-hint" type="text">　 #注目
       <input class="tt-query" type="text">　 #注目
     </span>
  </div>
  <input type="text" id="user_item_tags" data-role="tagsinput" placeholder="アイテムを入力" style="display: none;" class="tagsinput"> #注目

になっている…!! そっかー、もともとinputになると予想していたところはdisplay:noneで使用されないのか、ということがわかったので

$(function() {
   return $('.bootstrap-tagsinput input').typeahead({

に修正して、動くようになった。

問題発生。エンターキーを押すと送信されてしまいます…

qiita.com

に従い、type=“button"に以下のように

    <input type="button" onclick="submit();" value="送信" />

にすることで、防ぐことができた。