JQuery Combobox/select autocomplete?

Ответ 1

Посмотрите на следующий пример автозаполнения jQueryUI, поскольку он поддерживает выбор, и я думаю, что это то, что вы ищете. Надеюсь, это поможет.

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

Ответ 2

[edit] Прекрасный выбранный плагин jQuery был куплен для моего внимания, выглядит как отличная альтернатива мне.

Или, если вы просто хотите использовать автозаполнение jQuery, я расширил пример combobox, чтобы поддерживать настройки по умолчанию и удалять всплывающие подсказки, чтобы дать то, что я думаю, более ожидаемое поведение. Попробуйте.

(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);

Ответ 3

Я знаю, что это было сказано ранее, но jQuery Autocomplete будет делать именно то, что вам нужно. Вы должны проверить документы, поскольку автозаполнение очень настраивается. Если вы знакомы с javascript, тогда вы сможете это исправить. Если нет, я могу дать вам несколько указателей, как я это делал раньше, но будьте осторожны, я тоже не очень разбираюсь в javascript, так что несите меня на этом.

Я думаю, что первое, что вам нужно сделать, это просто получить текстовое поле автозаполнения, работающее на вашей странице, а затем вы можете настроить его оттуда.

Виджет автозаполнения принимает данные JSON как параметр "источник:". Поэтому вы должны настроить приложение для создания 20 категорий верхнего уровня и подкатегорий в формате JSON.

Следующее, что нужно знать, - это то, что когда пользователь вводит ваше текстовое поле, виджет автозаполнения отправляет введенные значения в параметр под названием "term" .

Итак, скажем, вы сначала настроили свой сайт для доставки данных JSON из URL-адреса, например:

/categories.json

Тогда ваш источник автозаполнения: опция будет "source:/categories.json".

Когда пользователь вводит текстовое поле, например " first-cata​​strong > ...", виджет автозаполнения начнет отправлять значение в параметре "term" следующим образом:

/categories.json?term=first-cata

Это вернет данные JSON обратно в виджет, отфильтрованный всем, что соответствует " first-cata​​strong > ", и это отображается как предложение автозаполнения.

Я не уверен, что вы программируете, но вы можете указать, как параметр "term" находит совпадение. Таким образом, вы можете настроить это, чтобы этот термин нашел совпадение в середине слова, если вы хотите. Например, если пользователь вводит " или", код может соответствовать совпадению "sp или ts".

Наконец, вы сделали комментарий, что хотите иметь возможность выбрать имя категории, но виджет автозаполнения представить идентификатор категории, а не имя.

Это легко сделать с помощью скрытого поля. Это то, что показано в документах автозаполнения jQuery.

Когда пользователь выбирает категорию, ваш JavaScript должен обновить скрытое поле с идентификатором.

Я знаю, что этот ответ не очень подробный, но это в основном потому, что я не уверен, что вы программируете, но приведенное выше должно указывать на вас в правильном направлении. Дело в том, что вы можете делать практически любую настройку, которую хотите с помощью этого виджета, если вы готовы потратить время, чтобы изучить его.

Это широкие штрихи, но вы можете посмотреть здесь для некоторых заметок, которые я сделал, когда я реализовал нечто похожее на то, что вы хотите в приложении Rails.

Надеюсь, это помогло.

Ответ 4

Это отлично работает для меня, и я делаю больше, записывая меньше с измененным примером jQuery.

Я определил объект select на своей странице, как и jQuery ex. Я взял текст и подтолкнул его к массиву. Затем я использую массив как свой источник для моего автозаполнения ввода. tadaa.

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

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

Ответ 5

jQuery 1.8.1 имеет пример этого в автозаполнении. Это очень легко реализовать.