Rails 应用程序的 jquery 自动完成

Question

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

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

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

希望能从你们那里得到好东西。

Answer 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
                        };
                    }
                }));
            };

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