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

【问题标题】：jquery autocomplete for rails application用于rails应用程序的jquery自动完成
【发布时间】：2011-01-14 10:57:35
【问题描述】：

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

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

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

希望能得到你们的好东西。

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui ruby-on-rails-3

【解决方案1】：

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

这满足了我的要求。希望对其他人有所帮助。

【讨论】：

【解决方案2】：

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

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

类似这样的：


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

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

但要动态更新自动完成响应以包含新创建的“苹果”，您必须替换保存所有苹果的 javascript 变量。

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

希望这是有道理的

【讨论】：