他の人がどんな入力をしたかを確認しつつ、ユーザーがタグを登録できたら使い勝手が良いと思って調べてみた。
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({
に修正して、動くようになった。
問題発生。エンターキーを押すと送信されてしまいます…
に従い、type=“button"に以下のように
<input type="button" onclick="submit();" value="送信" />
にすることで、防ぐことができた。