Question

我在我的Rails应用程序中使用Bootstrap-sass和formtastic，我不确定为什么bootstrap-typeahead功能不起作用。

表格部分：

<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %>

application.js manifest：

//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug

结果HTML源代码：

<input :data-minLength="2" data-provide="typeahead" data-source="[&quot;hello&quot;, &quot;hellow&quot;, &quot;heaven&quot;, &quot;helo&quot;, &quot;herr&quot;]"

最后，我需要自定义typeahead以获得我想要的性能，但即使这个简单的javascript也因某些原因无效。我发现代码没有问题。有谁可以帮助我？

更新我用javascript方式尝试了如下：

<script> //call typeahead
$(function() {
    $('input#type_ahead').typeahead({
        'source' : ["hello", "heaven", "heythere"]
    });
})
</script>

<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag

仍然看起来没有类型无法工作。即输入“他”并没有让我得到上述数组中这三个项目的下拉列表。有没有人有想法？

Answer 1

我认为你需要为html_safe设置：

{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }

Answer 2

您的网页加载时是否调用了typeahead（）方法？你需要做这样的事情;

$(function() {
  $('input').typeahead();
})

你需要为你的输入分配一个类或id来特别地将typeahead绑定到它（Rails可能已经自动为它分配了一个id，我假设你已经特别省略了它）

$(function() {
  $('input#my-tag-field-with-a-cool-typeahead').typeahead();
})

编辑：

以下对我有用。它需要对导轨部分进行一些修改以适合您的情况，但这绝对有效。

<script>
$(function() {
  $('input#type_ahead').typeahead()
}
</script>

<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>

Rails中的Bootstrap Typeahead

2 个答案: