Professionelle jQuery-basierte Combobox-Steuerung? [geschlossen]

86

Gibt es einen Fachmann ? Combobox-Steuerelemente (Dropdown-Liste mit Autosuggestion), die auf der jQuery-Bibliothek basieren?

Es sollte in der Lage sein, große Datenmengen zu verarbeiten und einige Skinning- Optionen zu haben. Eine mehrspaltige Ergebnisliste wäre auch großartig. Ich arbeite mit ASP.NET, aber es ist kein Problem, wenn ich einen Wrapper dafür schreiben musste.

Alt-Text

Ich verwende bereits ein Steuerelement eines Drittanbieters, habe jedoch einige Kompatibilitätsprobleme zwischen den Steuerelementen zweier Anbieter festgestellt. Nun, ich möchte diese Art von Abhängigkeiten loswerden.

splattne
quelle
Konnten Sie jemals eine bessere Antwort auf diese Frage finden?
Element
Schauen Sie sich die Antwort von GeorgeBarker unten an.
Splattne
Die Combobox von jQuery heißt "Autocomplete". jqueryui.com/autocomplete/#combobox
Aaron

Antworten:

24

Leider ist das Beste, was ich gesehen habe, die jquery.combobox , aber sie sieht nicht wirklich nach etwas aus, das ich wirklich in meinen Webanwendungen verwenden möchte. Ich denke, es gibt einige Usability-Probleme mit diesem Steuerelement, aber als Benutzer glaube ich nicht, dass ich anfangen muss, für die Dropdown-Liste zu tippen, um sie in ein Textfeld zu verwandeln.

Ich bevorzuge die Combo Dropdown Box , aber sie hat immer noch einige Funktionen, die ich möchte, und sie ist immer noch in Alpha. Der einzige Gedanke, den ich nicht mag, außer dass es Alpha ist ... ist, dass nach dem Eingeben der Combobox die ursprünglichen Dropdown-Listenelemente verschwinden. Vielleicht gibt es jedoch eine Einstellung dafür ... oder es könnte ziemlich einfach hinzugefügt werden.

Dies sind die einzigen zwei Optionen, die ich kenne. Viel Glück bei deiner Suche. Ich würde gerne hören, ob Sie eine finden oder ob die zweite Option für Sie funktioniert.

Elijah Manor
quelle
1
Ich habe anscheinend Kompatibilitätsprobleme mit jquery.combobox und jQuery 1.4.x ... wie bei den meisten Plugins, die schon lange nicht mehr gewartet wurden ...
Lukas Eder
3
Der Kommentar zum ersten Link 'Hinweis: Im Moment verhält sich die jquery.combobox wie eine Dropdown-Liste und nicht wie eine vollständige Combbox. Derzeit werden keine Texteingaben akzeptiert. ' Art besiegt den Zweck IMO ....
Matthew Dresser
1
toter Link bei sanchezsalvador.com
Markashworth
53

Hier ist eine, die sehr vielversprechend aussieht. Es ist eine echte Kombination - Sie sehen, was Sie eingeben. Hat eine coole Funktion, die ich anderswo nicht gesehen habe: Paging-Ergebnisse.

FlexBox

GeorgeBarker
quelle
Ich werde die FlexBox-Empfehlung unterstützen. Es verfügt über ein sehr flexibles Design und UI-Optionen.
Ben Griswold
Neue Version (0.9.3) wurde gerade veröffentlicht. FlexBox unterstützt jetzt die clientseitige JSON-Filterung.
Noah Heldman
1
imo FlexBox ist in einigen Fällen übertrieben.
Kajo
Scheint, alle Daten (json) auf einmal zu laden, daher ist dies möglicherweise nicht angemessen, wenn die Datenquelle viele Datensätze enthält
David
Wenn ich bereits einen Wert ausgewählt habe, klicken Sie auf den Pfeil, um nur den ausgewählten Wert anzuzeigen, nicht alle Werte.
Linbo
24

Wer ein jquery "Combo Box" sucht, scheint auf diese Frage gerichtet zu sein. Mein Beitrag ist für Leute, die auf diese Seite kommen, um ein "traditionelles" Kombinationsfeld zu finden, anstatt eine Antwort auf die ursprüngliche Frage. Die oben genannten Lösungen konzentrieren sich alle darauf, die Eingabe als Mittel zum Filtern und automatischen Vervollständigen zu einem vorhandenen Auswahlwert zu verwenden. (ideal für große Datenmengen)

Wenn Sie nach dem traditionellen Kombinationsfeld suchen, bei dem es sich einfach um "Geben Sie etwas ein oder wählen Sie aus diesen vordefinierten Werten aus" handelt (nein, wir werden diejenigen, die während der Eingabe nicht übereinstimmen, nicht ausblenden) müssen zu tun ist

<select id="combo4" style="width: 200px;"
            onchange="$('input#text4').val($(this).val());">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input id="text4"
       style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

Siehe http://bit.wisestamp.com/uncategorized/htmljquery-editable-combo-2/

Es sollte einfach sein, dies in ein Plugin zu packen, das ein vorhandenes Select-Tag konvertiert, obwohl ich das noch nicht gesehen habe.

PS: Das Hauptproblem, das ich bei "jQuery Editable Combobox" sehe, ist, dass es eine Auswahlliste bleibt und es überhaupt nicht offensichtlich ist, dass Sie einfach anfangen können, etwas Neues einzugeben.

Danny W. Adair
quelle
15

Eine neue Abzweigung des sexy-Combo-Projekts ist jetzt erhältlich, die vielversprechend aussieht: http://code.google.com/p/ufd/

Lomaxx
quelle
Ich mag es, dass es eine Auswahl in eine Combobox verwandelt.
Beetstra
1
Nachdem ich jeden Vorschlag auf der Seite überprüft hatte, entschied ich mich für diesen. Schnell, einfach, bietet genau die Grundfunktionalität, die ich wollte, und arbeitete an einer vorhandenen Auswahleingabe
elwyn
Kann auch mit Jquery UI Themeroller arbeiten
codeulike
Dieser war das Geschäft für mich. Funktioniert nahtlos mit IE7 und IE8, was eine Voraussetzung war. Infix-Suche (Mid-Word), Bildlaufleisten für längere Listen und gute Wiedergabe mit anderen Komponenten.
Alastair
Dies ist bei weitem am einfachsten zu integrieren, wenn Ihr vorhandener Code ein altes HTML-Dropdown verwendet. Ich habe diesen benutzt.
Max
14

Wie wäre es mit JQuery UI Autocomplete , der im Grunde genommen die "offizielle" Version des Autocomplete-Plugins von Jorn Zaeferrer ist ?

Ich habe auch ein direktes JQuery-Combobox- Plugin geschrieben, das von seinen Benutzern ziemlich gutes Feedback erhalten hat. Es ist jedoch ausdrücklich nicht für große Datenmengen gedacht. Ich denke, wenn Sie etwas wollen, das die Liste basierend auf den Benutzertypen beschneidet, sind Sie mit Jorns Autocompletion-Plugin besser dran.


quelle
Jorn Zaeferrers Autocomplete-Plugin ist einfach und fantastisch
Jake Wilson
7

Das ist auch vielversprechend:

JQuery Dropdown- Kombinationsfeld auf simpletutorials.com

Anthony Kong
quelle
Sieht ziemlich gut aus, unterstützt aber nicht, einen anderen Namen und Wert zu haben, als Sie es mit select <options>
BT
1
Unterstützt auch nicht zwei Kombinationsfelder auf einer Seite.
Tim Saylor
7

Eine offizielle ComboBox / Autocomplete-Komponente für die jQuery-Benutzeroberfläche ist in Vorbereitung ... (zuvor in der Beta für jQuery UI 1.5.x), siehe jQuery UI-Wiki

AKTUALISIEREN:

Die Autocomplete-Funktionalität ist jetzt eine Kernfunktion der jQuery-Benutzeroberfläche ( siehe Dokumente) .

Schleifer Versluys
quelle
Dies ist jetzt live mit jQuery 1.8. Ich benutze es ziemlich erfolgreich, es war ein gut gestaltetes Widget.
Boldewyn
Erlebt ihr den Post-Effekt? Wenn ich auf den Pfeil klicke, um die Liste
im Uhrzeigersinn
7
Eine Combobox ist nicht dasselbe wie Autocomplete
Neil McGuigan
5

Wenn Sie keine Mehrspalten benötigen, ist die Auswahl eine weitere gute Wahl. MIT Lizenziert

Mortdale
quelle
+1 für gewählt. Sieht gut aus und wir mussten keine Änderungen an vorhandenen Dropdowns mit Daten vornehmen, die aus einer ObjectDatasource stammen. Es funktioniert einfach!
Matt
3

Ich suche das gleiche. Die, die mir bisher am besten gefallen hat, ist diese für ExtJs - außer ich habe sie nicht mit großen Listen getestet: www.sencha.com/deploy/dev/examples/form/combos.html

Hier ist noch eine wirklich (!) Schnelle: http://jsearchdropdown.sourceforge.net/

Zum Beispiel funktioniert das SexyCombo ziemlich fantastisch, ist aber für längere Listen viel zu langsam. Die SexyCombo-Folk-UFD ist viel schneller, aber die Initialisierungszeit für wirklich große Listen ist immer noch recht langsam. Außerdem bekomme ich manchmal etwas! "blinkt". Aber ich denke, es wird in naher Zukunft einige Updates geben.

Sithlord
quelle
ExtJs funktioniert auch sehr gut mit großen (oder großen) Listen, da es Paging unterstützt und Sie entweder die Werte lokal abfragen oder die Abfrage an den Server zurücksenden und einen weiteren Teil der Ergebnisse bereitstellen können. Das Problem mit ExtJs ist die steile Lernkurve.
Stivlo
3

Sexy-Combo ist veraltet. Das Projekt Unobtrusive Fast-Filter Dropdown wurde weiterentwickelt. Sieht vielversprechend aus, da ich ähnliche Anforderungen habe.

https://code.google.com/p/ufd/

Pinguincoder
quelle
Obwohl nett, scheint es nicht mit jquery> 1.6 zu funktionieren. Suche nach anderen Optionen.
Dan Radu
2

Warum versuchen Sie nicht http://jqueryajax.codeplex.com/ . Es handelt sich um eine Sammlung von ASP.NET-Steuerelementen, die auch mehrspaltige Dropdown-Listen enthalten.


quelle
2

Ich hatte das gleiche Problem, also habe ich mein eigenes gemacht.

Es ist ein Vorlagensystem integriert, sodass Sie die Ergebnisse wie gewünscht aussehen lassen können. Funktioniert mit allen gängigen Browsern und akzeptiert Arrays und JSON-Objekte. http://code.google.com/p/custom-combobox/

Donny V.
quelle
2

Hier ist eine wirklich coole: http://www.xnodesystems.com/ Das dynamische Listenfeld verfügt nicht nur über die Funktion zur automatischen Vervollständigung, sondern kann auch eine Validierung durchführen.

Richard Xiong
quelle
2

Ich habe versucht, http://jqueryui.com/demos/autocomplete/#combobox und die Probleme waren:

  • Browserübergreifendes Rendern
  • Unfähigkeit, benutzerdefinierten Wert einzureichen

Infolgedessen habe ich es ein wenig optimiert und es hat in ASP.NET MVC gut funktioniert. Meine Version von CSS und Widget-Skript finden Sie hier http://saplin.blogspot.com/2011/12/html-combobox-control-and-aspnet-mvc.html

Ein Beispiel zum Binden des MVC-Modells an einen benutzerdefinierten Wert ist ebenfalls vorhanden.

Maxim Saplin
quelle
0

alles was Sie brauchen http://jquerycomboboxtmpl.codeplex.com/

Dropdown-Liste für Vorlagen

Rootkit
quelle
Bitte fügen Sie zumindest eine Erklärung für die von Ihnen vorgeschlagene Lösung hinzu und erklären Sie, warum sie den Kriterien der Frage entspricht.
mtsr