在 Rails 中引导 Typeahead

Posted 2023-03-05

【中文标题】在 Rails 中引导 Typeahead

【英文标题】：Bootstrap Typeahead in Rails

【发布时间】：2012-12-14 18:47:32

【问题描述】：

我在我的 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

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

【问题讨论】：

not working 是什么意思？你有错误吗？什么都没有发生吗？有没有意外发生？

@regulatethis，不工作，我的意思是当我输入几个字母时，不会触发预输入。换句话说，如果源是 ['hello', 'hey', 'heyyyy'] 的数组，输入 'he' 不会显示这三个项目的列表。

【参考方案1】：

我认为您需要将html_safe 设置为：

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

【讨论】：

它修复了数组，但 typeahead 功能仍然无法正常工作。

【参考方案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']" %>