我的网站上有一个页面,其中包含一个允许用户向项目添加标签的表单。我想合并typeahead,以便当用户开始在输入框中键入标签时,会出现一个下拉列表,其中包含与该字符串匹配的现有标签。我想我可以使用basic example完成此任务,但它似乎无法正常工作。
这是我的脚本显示页面:
<div id="add-tag-form">
<%= form_tag add_tag_path, id: "custom-tag",
class: "form-group",
autocomplete: "off",
remote:true
do %>
<%= text_field_tag :tag, nil, placeholder: 'Add tag', class: "form-control typeahead", id: 'add-tag' %>
<%= submit_tag 'Add' %>
<span id = "tag-block" class="help-block"></span>
<% end %>
</div>
<script>
$(document).ready(function(){
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var tags = Tag.all.pluck(:name);
$('#add-tag-form .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'tags',
source: substringMatcher(tags)
});
});
</script>
在控制台中,我得到Uncaught SyntaxError: unexpected token :
,它指向行var tags = Tag.all.pluck(:name);
中的:name。我的想法是ruby没有被脚本标签识别,但我可能是错的。这样做的正确方法是什么?
另外,我是否需要脚本开头的$(document).ready
行?