jQuery Combobox/sélectionner la saisie semi-automatique? [fermé]

regardez l'exemple suivant de l'Autocomplete jQueryUI, car il garde un select autour et je pense que c'est ce que vous cherchez. Espérons que cette aide.

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

[edit] la belle plugin jQuery choisi a été acheté à mon attention, ressemble à une grande alternative pour moi.

ou si vous voulez juste utiliser jQuery autocomplete, j'ai étendu le exemple de combobox pour prendre en charge les défauts et enlever les touches d'outils pour donner ce que je pense être un comportement plus attendu. l'Essayer .

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

je sais que cela a été dit plus tôt, mais jQuery Autocomplete fera exactement ce dont vous avez besoin. Vous devriez consulter les docs car l'autocomplete est très personnalisable. Si vous êtes familier avec javascript, alors vous devriez être en mesure de résoudre ce problème. Si ce n'est pas le cas, je peux vous donner quelques conseils, comme je l'ai déjà fait une fois, mais attention, Je ne suis pas très versé en javascript moi-même non plus, alors soyez indulgents.

je pense que la première chose à faire faire est juste obtenir un champ de texte autocomplete simple travaillant sur votre page, et alors vous pouvez le personnaliser de là.

le widget autocomplete accepte les données JSON en tant qu'option 'source:'. Vous devriez donc configurer votre application pour produire les 20 catégories et sous-catégories de haut niveau dans le format JSON.

la prochaine chose à savoir est que lorsque l'utilisateur tape dans votre zone de texte, le widget autocomplete enverra les valeurs tapées dans un paramètre appelé"term".

alors disons que vous avez d'abord configuré votre site pour fournir les données JSON à partir D'une URL comme celle-ci:

/categories.json

puis votre source autocomplete: option serait ' source: / categories.json".

Lorsqu'un utilisateur tape dans le champ de texte, tel que first-cata ...'le widget autocomplete va commencer à envoyer la valeur dans le paramètre' term 'comme ceci:

/categories.json?term=first-cata

Ce sera de retour Les données de JSON de retour au widget filtré par tout ce qui correspond ' first-cata ", et ceci est affiché comme une suggestion autocomplète.

Je ne suis pas sûr de ce que vous programmez, mais vous pouvez spécifier comment le paramètre 'term' trouve une correspondance. Donc vous pouvez personnaliser cela, de sorte que le terme trouve une correspondance au milieu d'un mot si vous voulez. Exemple, si l'utilisateur tape ou , vous pouvez faire une correspondance sur " sp ou ts".

enfin, vous avez fait un commentaire que vous voulez être en mesure de sélectionner un nom de catégorie, mais avoir le widget autocomplete soumettre L'ID de catégorie pas le nom.

cela peut facilement être fait avec un champ caché. C'est ce que montre le jQuery autocomplete docs.

Lorsqu'un utilisateur sélectionne une catégorie, votre JavaScript doit mettre à jour un champ caché avec l'ID.

je sais que cette réponse n'est pas très détaillé, mais c'est principalement parce que je ne suis pas sûr de ce que vous programmez, mais ce qui précède devrait vous orienter dans la bonne direction. La chose à savoir est que vous pouvez faire pratiquement n'importe quelle personnalisation que vous voulez avec ce widget, Si vous êtes prêt à passer le temps de l'apprendre.

ce sont les grandes lignes, mais vous pouvez regardez ici pour quelques notes que j'ai faites quand j'ai mis en œuvre quelque chose similaire à ce que vous voulez dans une application Rails.

Espère que cela a aidé.

cela fonctionne très bien pour moi et je fais plus, j'écris moins avec l'exemple de jQuery modifié.

j'ai défini l'objet select sur ma page, tout comme le jQuery ex. J'ai pris le texte et l'a poussé à un tableau. Puis j'utilise le tableau comme source à mon autocomplete d'entrée. tadaa.

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

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

jQuery 1.8.1 en a un exemple sous autocomplete. Il est très facile à mettre en œuvre.