jQuery Combobox/automatische Vervollständigung auswählen?

Question

Existiert ein jQuery-Plug-in zum Ersetzen von Auswahl/Kombinationsfeld?

Ich habe versucht, SexyCombo, und es ist so nah an dem, was ich will, aber es wird nicht abgeschlossen, wenn Sie aus der Mitte schreiben, nur von Anfang an.

Ich habe 2 Kategorien (20 Kategorien auf oberster Ebene und mit Unterkategorien in insgesamt 120 Kategorien). Wenn der Benutzer einen Eintrag einreicht, muss er die gewünschte Kategorie so schnell wie möglich finden.

So ... 2 Ebenen + Autocomplete bevölkern Text, auch wenn Sie mittlere Buchstaben schreiben.

Oder eine andere Lösung?

Answer 1

jQuery 1.8.1 hat ein Beispiel dafür unter Autocomplete. Es ist sehr einfach zu implementieren.

Answer 2

Werfen Sie einen Blick auf das folgende Beispiel der jQueryUI Autocomplete, da es eine Auswahl hält und ich denke, das ist, was Sie suchen. Hoffe das hilft.

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

Answer 3

Ich weiß, das früher gesagt wurde, aber jQuery Autocomplete wird genau das tun, was Sie brauchen. Sie sollten die Dokumente überprüfen, da die Autovervollständigung sehr anpassbar ist. Wenn Sie mit Javascript vertraut sind, dann sollten Sie in der Lage sein, dies auszuarbeiten. Wenn nicht, kann ich Ihnen ein paar Hinweise geben, wie ich es schon einmal getan habe, aber Vorsicht, ich bin auch nicht sehr versiert in Javascript.

Ich denke, das erste, was Sie tun sollten, ist nur ein einfaches Autocomplete-Textfeld auf Ihrer Seite arbeiten, und dann können Sie es von dort anpassen.

Das Autocomplete-Widget akzeptiert JSON-Daten als 'source:' - Option. Daher sollten Sie Ihre App so einrichten, dass die 20 Top-Level-Kategorien und Unterkategorien im JSON-Format erstellt werden.

Die nächste Sache zu wissen ist, dass, wenn der Benutzer in Ihr Textfeld eingibt, das Autocomplete-Widget die eingegebenen Werte in einem Parameter namens "term" senden wird.

Also lassen Sie uns sagen, dass Sie zunächst Ihre Website Set-up, um die JSON-Daten von einer URL wie folgt zu liefern: Quelle

/categories.json 

Dann wird Ihr Autocomplete: ': /categories.json source' Option wäre.

Wenn ein Benutzer in das Textfeld ein, wie ‚erste Cata ...‘ der Autocomplete-Widget den Wert im ‚Begriff‘ Parameter wie folgt zu senden beginnen:

/categories.json?term=first-cata 

Dieser Wille JSON-Daten zurück an das Widget zurückgeben, das durch alles gefiltert wurde, das mit 'first-cata' übereinstimmt. Dies wird als Autocomplete-Vorschlag angezeigt.

Ich bin mir nicht sicher, was Sie programmieren, aber Sie können angeben, wie der Parameter 'term' eine Übereinstimmung findet. So können Sie dies anpassen, so dass der Begriff eine Übereinstimmung in der Mitte eines Wortes findet, wenn Sie möchten. Beispiel: Wenn der Benutzer 'oder' eingibt, kann der Code eine Übereinstimmung mit 'sp oder ts' herstellen.

Zuletzt haben Sie einen Kommentar gemacht, dass Sie in der Lage sein möchten, einen Kategorienamen auszuwählen, aber das Autocomplete-Widget die Kategorie-ID nicht den Namen übermitteln.

Dies kann leicht mit einem versteckten Feld durchgeführt werden. Dies wird in den jQuery-Autocomplete-Dokumenten angezeigt.

Wenn ein Benutzer eine Kategorie auswählt, sollte Ihr JavaScript ein verstecktes Feld mit der ID aktualisieren.

Ich weiß, dass diese Antwort nicht sehr detailliert ist, aber das liegt hauptsächlich daran, dass ich nicht sicher bin, was Sie programmieren, aber das obige sollte Sie in die richtige Richtung weisen. Es ist wichtig zu wissen, dass Sie mit diesem Widget praktisch alle gewünschten Anpassungen vornehmen können, wenn Sie bereit sind, die Zeit dafür zu nutzen.

Dies sind die breiten Striche, aber Sie können look here für einige Notizen, die ich gemacht, wenn ich etwas ähnliches wie Sie in einer Rails-App implementiert haben.

Hoffe das half.

Answer 4

[Bearbeiten] Die schöne chosen jQuery plugin wurde zu meiner Aufmerksamkeit gekauft, sieht aus wie eine gute Alternative zu mir.

Oder wenn Sie nur jQuery Autocomplete verwenden möchten, habe ich die combobox example erweitert, um Standardwerte zu unterstützen und entfernen Sie die Tooltips, um zu geben, was ich denke, ist mehr erwartetes Verhalten. 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 5

Das funktioniert gut für mich, und ich mache mehr, schreiben weniger mit jQuery Beispiel geändert.

Ich habe das select-Objekt auf meiner Seite definiert, genau wie jQuery ex. Ich nahm den Text und schob ihn in ein Array. Dann benutze ich das Array als Quelle für meine Eingabevervollständigung. Tadaa.

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

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