2

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

表格部分：

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

application.js 清单：

//= 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

而且似乎预输入仍然无法正常工作。即）输入“他”不会让我得到上述数组中这三个项目的下拉列表。有人有想法吗？

4

2 回答 2

0

我认为你需要设置html_safe：

{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
于 2012-12-30T03:25:05.947 回答
0

您是否在页面加载时调用了 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']"} %>
于 2012-12-30T09:41:02.763 回答