Question

是否存在用于替换select / combo box的jQuery插件？

我尝试过SexyCombo，它与我想要的一样接近，但如果你是从中间开始写作，那么它就不会完成。

我有两个级别的类别（20个顶级类别，以及子类别共120个类别），因此当用户提交条目时，他必须尽快找到所需的类别。

所以...即使你写中间字母，2级+自动填充也会填充文本。

或其他任何解决方案？

Answer 1

看一下jQueryUI自动完成的以下示例，因为它保持一个选择，我认为这就是你要找的。希望这会有所帮助。

http://jqueryui.com/demos/autocomplete/#combobox

Answer 2

[编辑]可爱的chosen jQuery plugin已经引起了我的注意，看起来像是一个很好的选择。

或者如果你只是想使用jQuery自动完成，我已经扩展了combobox example以支持默认值并删除工具提示以提供我认为更符合预期的行为。 Try it out

(function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var input,
              that = this,
              wasOpen = false,
              select = this.element.hide(),
              selected = select.children(":selected"),
              defaultValue = selected.text() || "",
              wrapper = this.wrapper = $("<span>")
                .addClass("ui-combobox")
                .insertAfter(select);

            function removeIfInvalid(element) {
                var value = $(element).val(),
                  matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
                  valid = false;
                select.children("option").each(function () {
                    if ($(this).text().match(matcher)) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                if (!valid) {
                    // remove invalid value, as it didn't match anything
                    $(element).val(defaultValue);
                    select.val(defaultValue);
                    input.data("ui-autocomplete").term = "";
                }
            }

            input = $("<input>")
              .appendTo(wrapper)
              .val(defaultValue)
              .attr("title", "")
              .addClass("ui-state-default ui-combobox-input")
              .width(select.width())
              .autocomplete({
                  delay: 0,
                  minLength: 0,
                  autoFocus: true,
                  source: function (request, response) {
                      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                      response(select.children("option").map(function () {
                          var text = $(this).text();
                          if (this.value && (!request.term || matcher.test(text)))
                              return {
                                  label: text.replace(
                                    new RegExp(
                                      "(?![^&;]+;)(?!<[^<>]*)(" +
                                      $.ui.autocomplete.escapeRegex(request.term) +
                                      ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                    ), "<strong>$1</strong>"),
                                  value: text,
                                  option: this
                              };
                      }));
                  },
                  select: function (event, ui) {
                      ui.item.option.selected = true;
                      that._trigger("selected", event, {
                          item: ui.item.option
                      });
                  },
                  change: function (event, ui) {
                      if (!ui.item) {
                          removeIfInvalid(this);
                      }
                  }
              })
              .addClass("ui-widget ui-widget-content ui-corner-left");

            input.data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li>")
                  .append("<a>" + item.label + "</a>")
                  .appendTo(ul);
            };

            $("<a>")
              .attr("tabIndex", -1)
              .appendTo(wrapper)
              .button({
                  icons: {
                      primary: "ui-icon-triangle-1-s"
                  },
                  text: false
              })
              .removeClass("ui-corner-all")
              .addClass("ui-corner-right ui-combobox-toggle")
              .mousedown(function () {
                  wasOpen = input.autocomplete("widget").is(":visible");
              })
              .click(function () {
                  input.focus();

                  // close if already visible
                  if (wasOpen) {
                      return;
                  }

                  // pass empty string as value to search for, displaying all results
                  input.autocomplete("search", "");
              });
        },

        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);

Answer 3

我知道这已经说过了，但是jQuery Autocomplete会完全按照你的需要做。您应该查看文档，因为自动填充是非常可定制的。如果您熟悉javascript，那么您应该能够解决这个问题。如果没有，我可以给你一些指示，就像我以前做过的那样，但要注意我自己也不熟悉javascript，所以请耐心等待。

我认为您应该做的第一件事就是在您的页面上使用简单的自动填充文本字段，然后您可以从那里进行自定义。

自动完成小部件接受JSON数据，因为它是'source：'选项。因此，您应该设置应用程序以生成20个顶级类别和JSON格式的子类别。

接下来要知道的是，当用户键入文本字段时，自动完成窗口小部件将在名为“term”的参数中发送键入的值。

因此，假设您首先设置您的网站，以便从以下网址提供JSON数据：

/categories.json

然后你的自动完成源：选项将是'source：/categories.json'。

当用户输入文本字段时，例如“ first-cata ...”，自动填充小工具将开始在'term'参数中发送值，如下所示：

/categories.json?term=first-cata

这会将JSON数据返回到由“ first-cata ”匹配的任何内容过滤的小部件，并显示为自动完成建议。

我不确定您的编程是什么，但您可以指定'term'参数如何找到匹配项。因此，您可以自定义此项，以便术语在单词的中间找到匹配项（如果需要）。例如，如果用户输入“或”，则代码可以匹配“sp 或 ts”。

最后，您发表评论表示您希望能够选择类别名称，但让自动填充小部件提交类别ID而不是名称。

这可以通过隐藏字段轻松完成。这是jQuery自动完成文档中显示的内容。

当用户选择某个类别时，您的JavaScript应使用ID更新隐藏字段。

我知道这个答案不是很详细，但主要是因为我不确定你编程的是什么，但上面的内容应该指向正确的方向。要知道的是，如果您愿意花时间学习它，您几乎可以使用此小部件进行任何自定义操作。

这些是广泛的笔画，但您可以look here获取我在Rails应用程序中实现类似于您想要的内容时所做的一些注释。

希望这有帮助。

Answer 4

这对我很有用，而且我做的更多，用jQuery的修改示例写得更少。

我在页面上定义了select对象，就像jQuery ex一样。我拿了文本把它推到了一个数组中。然后我使用数组作为输入自动完成的源。 tadaa。

$(function() {
   var mySource = [];
   $("#mySelect").children("option").map(function() {
      mySource.push($(this).text());
   });

   $("#myInput").autocomplete({
      source: mySource,
      minLength: 3
   });
}

Answer 5

jQuery 1.8.1在自动完成下有一个这样的例子。它很容易实现。

jQuery Combobox /选择自动完成？

5 个答案: