用于rails应用程序的jquery自动完成

我需要在rails应用程序中使用autocomplete。它使用组合框作为源。我使用了jquery自动完成和组合框

但我需要一个额外的功能。假设我们键入“Apple”，但它在自动完成搜索中不可用，它会在列表中显示一个名为“createnewapple”的新项目，如果我们选择它，则会触发一个JavaScript事件。这样我们就可以打开一些对话框来添加它

此外，还可以在渲染后更新自动完成。意味着如果我们添加新记录，它也可以填充到列表中

---

希望能从你们这里得到好消息。

您是从服务器端还是客户端获得自动完成查询的响应

如果响应来自服务器端，则添加新的“apple”将自动更新。对于触发新对话框的javascript事件，可以使用Jquery“change”观察者事件

大概是这样的：

$("#autocomplete-list").live("change",function(){
  if($(this).val() == "Create New Apple"){
      //add function to create dialogue
  }
});

现在，如果您的自动完成响应来自客户端，您可以使用上面的回调来触发对话框创建

但是要动态更新autocomplete响应以包含新创建的“apple”，必须替换包含所有apple的javascript变量

您可以通过在创建新的“apple”时调用rails应用程序来实现这一点，apple将替换变量所在的DOM元素。这样，新创建的“苹果”将包含在自动完成列表中

---

希望这是有意义的

我用这段代码填满了我的场景。我修改了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
                        };
                    }
                }));
            };

auto_obj.source=函数（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
var匹配=假；
响应（选择.children（“选项”）.map（函数（i，值）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））{
匹配=真；
返回{
标签：text.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”
)“$1”，
值：文本，
选项：这个
};
}
如果（！match&&i==select.children（“option”）.size（）-1&&self.options.allow\u new）{
返回{
标签：'createnew'+input.val（）+''，
值：input.val（），
选项：空
};
}
}));
};

这满足了我的要求。对其他人来说，希望是完全有帮助的