我需要在 Rails 应用程序中使用自动完成功能。它使用组合框作为源。我使用了 jquery 自动完成和组合框。
但我需要一个额外的功能。假设我们输入“Apple”并且它在自动完成搜索中不可用,它会在名为“Create New Apple”的列表中显示一个新项目,如果我们选择它会触发 JavaScript 事件。这样我们就可以打开一些对话框来添加它。
此外,自动完成功能也可以在渲染后更新。意味着如果我们添加新记录,它也可以填充到列表中。
希望能从你们那里得到好东西。
最佳答案
我用这段代码完全填充了我的场景。我修改了jquery站点的代码,将更改事件重构为。
auto_obj.change = function(event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// Trigger the event for value not found
$(select).trigger('autocompletenotfound', $(this).val());
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
在源函数中
auto_obj.source = function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var match = false;
response(select.children("option").map(function(i, value) {
var text = $(this).text();
if (this.value && ( !request.term || matcher.test(text) )) {
match = true;
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}
if (!match && i == select.children("option").size() -1 && self.options.allow_new ) {
return {
label:'Create new <strong>'+ input.val() +'</strong>',
value: input.val(),
option: null
};
}
}));
};
这满足了我的要求。希望对其他人有所帮助。
关于Rails 应用程序的 jquery 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4690292/