Combobox de jQuery / seleccione a completação automática? [fechado]

Dê uma olhada no seguinte exemplo do Autocomplete jQueryUI, como ele está mantendo um select em torno e eu acho que é isso que você está procurando. Espero que isto ajude.

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

[editar] o adorável plugin jQuery escolhido foi comprado à minha atenção, parece uma grande alternativa para mim.

Ou se você só quiser usar o jQuery autocomplete, eu estendi o exemplo combobox para suportar os valores por omissão e remover as dicas para dar o que eu acho que é o comportamento mais esperado. experimenta {[[4]}.

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

Eu sei que isto já foi dito antes, mas o Autocompleto jQuery fará exactamente o que precisar. Você deve verificar os documentos como o autocomplete é muito personalizável. Se você está familiarizado com javascript, então você deve ser capaz de resolver isso. Se não posso dar-lhe algumas dicas, como já fiz isso uma vez antes, mas cuidado Eu não sou bem versado em javascript também, por isso, tenha paciência comigo sobre isso. Acho que a primeira coisa que deves fazer é arranjar uma solução simples. completar automaticamente o campo de texto trabalhando em sua página, e então você pode personalizá-lo a partir daí.

O elemento autocompleto aceita os dados JSON como sendo a opção ' source:'. Então você deve configurar o seu aplicativo para produzir as 20 categorias de nível superior, e subcategorias no formato JSON.

A próxima coisa a saber é que quando o utilizador escrever no seu campo de texto, o elemento autocompleto irá enviar os valores dactilografados num parâmetro chamado "termo".

Então vamos dizer que primeiro montaste o teu site para entregar os dados do JSON de uma URL como esta:

/categories.json

Então a sua opção de completar automaticamente a fonte: seria 'source: /categories.json.

Quando um utilizador escreve no campo de texto, como ' first-cata ...'o elemento auto-completo irá começar a enviar o valor no parâmetro' termo ' como este:

/categories.json?term=first-cata

Isto irá devolver os dados do JSON ao elemento filtrado por qualquer coisa que corresponda ao ' first-cata ', e isto é apresentado como uma sugestão de completar automaticamente.

Eu não sou claro o que você está programando, mas você pode especificar como o parâmetro 'termo' encontra uma correspondência. Então você pode personalizar isso, para que o termo encontre uma correspondência no meio de uma palavra, se você quiser. Por exemplo, se o utilizador escrever 'ou', poderá fazer uma correspondência em 'spouts'.

Por último, fez um comentário que deseja ser capaz de seleccionar um nome de categoria, mas que o elemento auto-completo submeta o ID de categoria e não o nome.

Isto pode ser facilmente feito com um oculto campo. Isto é o que é mostrado nos documentos autocompletos jQuery.

Quando um utilizador selecciona uma categoria, o seu JavaScript deverá actualizar um campo escondido com o ID.

Sei que esta resposta não é muito detalhada, mas isso é principalmente porque eu não tenho certeza do que você está programando, mas o acima deve indicar você na direção certa. A coisa a saber é que você pode fazer praticamente qualquer personalização que você quer com este widget, se você está disposto a gastar o tempo para aprendê-lo.

Estes são os traços gerais, mas você pode olhar aqui para algumas notas que eu fiz quando implementei algo semelhante ao que você quer em um aplicativo Rails.

Espero que isto tenha ajudado.

Isso funciona muito bem para mim e eu estou fazendo mais, escrevendo menos com o exemplo modificado de jQuery.

Defini o objecto select na minha página, tal como a ex. jQuery. Peguei na mensagem e empurrei-a para uma matriz. Então eu uso o array como minha fonte para minha entrada autocompleta. tadaa.

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

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

JQuery 1.8.1 tem um exemplo disto em autocomplete. É muito fácil de implementar.