JQuery auswählen Boxkomponenten - ausgewählt VS SELECT2

Dieser Artikel wurde Peer von Martín Martínez und Chris Perry überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

Haben Sie jemals an einem Projekt gearbeitet, und es schien, als wäre etwas visuell ausgeschaltet? Vielleicht war das Projekt fast abgeschlossen, aber einige Elemente sahen nicht so gut aus? Dies mögen kleine Details sein, aber sie machen einen Unterschied.

Wenn Ihr Projekt unattraktive Auswahlfelder enthält und Sie ihnen weitere Funktionen hinzufügen möchten, finden Sie ausgewählt und wählen 2 nützlich. Hier

In diesem Artikel werde ich diese beiden Plugins von Kopf an Kopf einsetzen und ihre Funktionen und ihre Anwendungsfälle vergleichen, damit Sie eine fundierte Wahl treffen können, welche für Sie am besten ist.

Key Takeaways

ausgewählt und select2 sind JQuery-Plugins, die die Funktionalität von ausgewählten Feldern verbessern und ihr Aussehen und ihre Benutzerfreundlichkeit verbessern. Während dies ein zuverlässiges und robustes Plugin ausgewählt wird, wird es nicht so aktiv gepflegt wie Select2, was regelmäßig neue Funktionen und Integrationen hinzufügt.
Beide Plugins unterstützen Platzhaltertext, ermöglichen die Suche in den Optionen und bieten die Möglichkeit, die Anzahl der Auswahlmöglichkeiten zu begrenzen. SELECT2 bietet jedoch auch die Option, Optionen zu deaktivieren.
• select2 fällt mit seinen zusätzlichen Funktionen ab, einschließlich programmatischer Zugriff, Tagging, Tokenisierung und Vorlagen. Es unterstützt auch AJAX und bietet erweiterte Anpassungsoptionen, wodurch es zu einem leistungsfähigeren Tool für ausgewählte Kästchen ist.
• Während ausgewählt wird eine gute Option für die grundlegende Select -Box -Verbesserung, wird SELECT2 für erweiterte Funktionen und regelmäßige Updates empfohlen. Select2 bietet auch eine umfassende Dokumentation und erleichtert die Implementierung und Verwendung in Projekten.
Installation

Sowohl ausgewählt als auch select2 sind über GitHub erhältlich. Dies bedeutet, dass Sie das jeweilige Repository klonen und die benötigten Dateien erhalten können.

Andernfalls können Sie beide Plugins mit Bower installieren (was als Schnittstelle zu GitHub dient). Wenn Bower Ihre bevorzugte Route ist, können Sie JQuery genauso gut schnappen, während Sie dabei sind.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

Nehmen Sie ansonsten die Dateien von Ihrem CDN Ihrer Wahl (z. B. CDNJs) und fügen Sie sie auf die übliche Weise in Ihre Seite ein. Dies habe ich in den Vorlagen getan, unter denen Sie dies verwenden können, um die Beispiele im Tutorial zu folgen.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

gewählt

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

select2

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

Sind die Projekte aktiv aufrechterhalten?

Wie Sie anhand der Github -Seite erkennen können verlassen - weit davon entfernt! Vielmehr haben die Entwickler es an den Ort gebracht, an dem sie es sein wollen, und es bleibt ein zuverlässiges und robustes Plugin.

Kontrast das mit Select2 hingegen und der Unterschied spürbar. Die Entwicklung dieser Bibliothek geht vor dem vollen Dampf und hat kürzlich ihre offizielle vierte Version (4.0.0) veröffentlicht. Dies bedeutet, dass neue Funktionen hinzugefügt werden, während andere veraltet und/oder entfernt werden.

Eine weitere nützliche Metrik kann die Anzahl der Fragen mit diesen Tags auf Stapelüberlauf sein. Sie können dies hier selbst versuchen: http://stackoverflow.com/tags

Wenn Sie "SELECT2" eingeben und dann den "Auserwählten" kontrastieren, werden Sie feststellen, dass es um das Select2 -Plugin viel mehr Aktivität zu geben scheint. Sie werden auch sehen, dass es eine Reihe von Integrationen hat, z. B. mit AngularJs und Ruby on Rails.

Wählen Sie Felder und Platzhalter

select2 und ausgewählt wechseln, wie einfach und mehrere ausgewählte Felder angezeigt werden.

In mehreren Auswahlfeldern mit reinem HTML können Benutzer einige der in der Liste verfügbaren Optionen sehen. Dies ist nicht visuell ansprechend und es muss eine Änderung dieser Ansicht vorgenommen werden. Ausgewählt und auswählen2 Entfernen Sie die "Listenansicht" und die Liste der Optionen wird angezeigt, wenn Sie in das Feld ausgewählt werden. Nur dann können Sie die Auswahl treffen.

Sie können Ihre Optionen mit beiden Plugins durchsuchen. Klicken Sie einfach in das Feld und geben Sie dann die ersten Zeichen Ihrer Wahl ein, dann werden die Ergebnisse in Echtzeit gemäß Ihrer Suche angezeigt.

select2 erleichtert es einfacher, Optionen auszuwählen, die bereits ausgewählt wurden. Wenn der Dropdown -Bereich geöffnet ist, können Sie auf ein beliebtes Element klicken, um sie zu deaktivieren. Ausgewählt hat diese Funktion noch nicht implementiert.

Sowohl ausgewählt als auch ausgewählt2 Support -Platzhaltertext für einzelne und mehrere Auswahlfelder.

begrenzte Anzahl von Auswahlen

Manchmal müssen Sie in einem mehrfach ausgewählten Feld die Anzahl der Optionen einschränken, die Benutzer auswählen. Der Vorteil der Verwendung von Select und Select2 besteht darin, dass Sie die Anzahl der Auswahlen sehr einfach ändern können.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Sie können die Anzahl der Auswahlmöglichkeiten einschränken, die aus einem Multi-Select-Box mit beiden Plugins ausgewählt werden können. Es ist jedoch erwähnenswert, dass ausgewählte Version dieser Funktion fortgeschritten ist. Nachdem Sie das Limit erreicht haben, wird ein Ereignis aufgerufen, wenn Sie versuchen, eine zusätzliche Option auszuwählen.

In diesem Beispiel werden die Benutzer gebeten, zwei Tage auszuwählen, die in ihrer Woche am produktivsten sind. Wenn sie versuchen, einen dritten Tag auszuwählen, wird ausgewählt ein Ereignis anrufen. Ich habe ausgewählt, um eine Warnmeldung hinzuzufügen, die zeigt, dass die Grenze erreicht wurde:

Siehe die begrenzte Anzahl von Auswahlen: Ausgewählt gegen Select2 von SitePoint (@sinepoint) auf CodePen.

reaktionsschnelles Design

Personen sehen Ihre Seiten auf allen möglichen Geräten. Wählen Sie also die Wählen Sie wie andere Komponenten Ihrer Website reaktionsschnell. Sowohl ausgewählt als auch Select2 unterstützen die Einstellungsbreite mit einem Prozentsatz und die Funktion ist bei beiden nahezu gleich. Dies erstellt reaktionsschnelle Auswahlfelder, die die Bildschirmgröße oder die Browserfensterbreite berücksichtigen.

Der einzige Unterschied, den ausgewählt und select2 zu dieser Funktion haben, ist der Code. Sie können die Breite von Select2 in HTML aus Select Tag in HTML deklarieren. Siehe es unten, um zu verstehen, wie praktisch es ist, ausgewählte Felder reaktionsschnell und visuell besser mit auserwählter und auszuwählen2.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

andere ähnliche Funktionen

ausgewählt und select2 haben andere häufige Funktionen, aber ich möchte drei Funktionen ansehen, die ich interessant fand: Behinderte Ergebnisse, Hidden-Suchbox und RTL-Unterstützung (rechts nach links).

deaktivierte Ergebnisse

Die interessantesten davon sind deaktivierte Ergebnisse. Mit dieser Option Set Set, Select2 Highlights Aktivierungsoptionen ausgewählt und ausgewählt. Sie können deaktivierte Auswahlmöglichkeiten sehen, können sie jedoch nicht auswählen. Normalerweise werden deaktivierte Ergebnisse festgelegt, um zu verhindern, dass ein Benutzer die Option auswählt, bis eine andere Bedingung erfüllt wurde. Diese Funktion verwandelt Ihre ausgewählten Felder in ein leistungsstarkes Tool und erhöht das Engagement mit dem Benutzer, wenn Sie lernen, wie Sie es entsprechend Ihren Anforderungen verwenden.

Um die Plugins mitzuteilen, dass Sie deaktivierte Ergebnisse aktiviert haben, fügen Sie das Attribut deaktiviert = "deaktiviert" zum Options -Tag, in dem Sie diese Funktion verwenden.

<span>max_selected_options: 2 // Chosen Plugin
</span>

In diesem ausgewählten Beispiel kann der Benutzer nur Optionen auswählen, die in seinem geografischen Standort verfügbar sind, aber er kann auch die anderen Optionen sehen, obwohl sie nicht verfügbar sind:

Siehe den ausgewählten Stift gegen Select2: Deaktivierte Ergebnisse von SitePoint (@sinepoint) auf CodePen.

versteckt das Suchfeld

Wenn Sie in der Liste der Optionen in einzelnen Auswahlfeldern nicht viele Auswahlmöglichkeiten haben, ist es ratsam, das Suchfeld auszublenden. Um das Suchfeld auszublenden, sollten Sie disable_search_threshold verwenden und einen größeren Wert als die Anzahl der Optionen in Ihrem Auswahlfeld einstellen.

<span>maximumSelectionLength: 2 // Select2 Plugin
</span>

<!-- Chosen - HTML -->
<select >
  ...
</select>

Die gleiche Logik gilt für SELECT2, aber die einzige Änderung ist die Terminologie, anstatt Disable_Search_threshold zu diskutieren.

<span>// Chosen - JavaScript
</span><span>$(".responsiveChosen").chosen({width: "50%"});
</span>

Eine Sache, die ich zu Select2 hinzufügen sollte, ist, dass Sie das Suchfeld dauerhaft ausblenden können, ohne sich über die Anzahl der Optionen zu besorgen, die Sie in Ihrem Auswahlfeld haben. Sie können dies tun, indem Sie minimumResultsForSearch in Infinity einstellen.

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

RTL-Unterstützung von rechts nach links

Eine große Anzahl von Websites ist in verschiedenen Sprachen mit unterschiedlichen Alphabeten geschrieben, und abgesehen davon werden einige dieser Sprachen aus einer anderen Richtung gelesen. Es ist ratsam, dass ausgewählte Felder mit den Regeln dieser Sprachen anpassen und ihre Richtung von LTR (links nach rechts) auf RTL verschieben sollten. Dies verbessert die Benutzererfahrung und erhöht die Verwendbarkeit Ihrer Website für Benutzer dieser Region.

Sowohl ausgewählt als auch ausgewählt2 unterstützt von der rechts nach links in ausgewählten Feldern. Der einzige Unterschied, den sie haben, ist, dass Select2 Sie benötigen, um die RTL-Unterstützung in der JavaScript-Datei zu deklarieren. In der Zwischenzeit fügen Sie in der ausgewählten Auswahl nur die ausgewählte RTL-Klasse neben der ausgewählten Klasse in HTML hinzu.

Warum wählen Sie Select2 über ausgewählt

Während Select2 von Auserwählten inspiriert wurde und die meisten Merkmale von Auserwählten enthält, hörten seine Mitwirkenden hier nicht auf. Sie haben einige der coolsten Funktionen für ausgewählte Kästchen eingebaut, einschließlich programmatischer Zugriff, Templating, deaktiviertem Modus, Tagging und Tokenisierung. Es hat auch Unterstützung für Ajax.

programmatischer Zugriff

programmatischer Zugriff bringt ausgewählte Felder auf eine andere Ebene. Sie sind sehr nützlich mit mehreren Auswahlfeldern. Sie können Schaltflächen hinzufügen, die mit JavaScript auf diese Auswahlfelder entsprechend Ihren Regeln hinzufügen.

Wenn einige der Optionen im mehrfachen Feld mehreren Auswahl eine Logik haben, die miteinander verknüpft ist und diese „verknüpften“ Optionen nach Ihren Beobachtungen von vielen Benutzern ausgewählt werden müssen, ist es nützlich, diese auszuwählen Auswahl mit einem einzigen Klick.

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

In diesem Beispiel können Sie schnell die "Swift" und "Objective-C" festlegen, indem Sie auf die Schaltfläche "iOS Technologies" klicken:

Siehe Stift Select2 - Programmatische Methoden von SitePoint (@sinepoint) auf CodePen.

Tagging

Tagging ist ein weiteres der Funktionen von Select2, mit der Auswahlfelder leistungsfähiger werden und die Grenze der normalen Auswahlfelder erweitert. Dadurch können Benutzer neue Auswahlmöglichkeiten hinzufügen, die noch nicht in der Optionsliste enthalten sind.

Tagging ist auch in Fällen sehr praktisch, wenn die Auswahlbereichs sehr groß ist und Sie nicht alle Auswahlmöglichkeiten in die Optionsliste eingeben können. Wenn das Tagging aktiviert ist und Benutzer ihre Auswahl in der Liste nicht finden, "schieben" sie sie, um ein Tag ihrer Wahl zu erstellen.

Seien Sie vorsichtig, wenn Sie das Tagging verwenden, da es von "böswilligen" Benutzern missbraucht werden kann, die ungültige Tags eingeben, die dem Ziel des SELECT -Felds nicht entsprechen.

Um das Markieren zu aktivieren, sollten Sie die Tags -Option auf True festlegen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Siehe den ausgewählten Stift gegen Select2: Tagging nach SitePoint (@sinepoint) auf CodePen.

Tokenisierung

Sobald Tags auf true gesetzt sind, ist die Option, Token -Separatoren einzuschließen. Geben Sie nach Eingabe des Namens des Tags einfach eins der angegebenen Token -Separatoren ein. Dann wird das Tag als Wahl in der Optionsliste eingegeben. Token -Separatoren dienen als Verknüpfung für das Erstellen von Tags, indem sie Zeichen von Ihrer Tastatur eingeben.

Mit Hilfe von Select2 können Sie Token -Separatoren mit jedem gewünschten Zeichen erstellen. Im folgenden Beispiel werden vier Token -Separatoren verwendet: /,,; und "" (Raum).

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

Versuchen Sie es, indem Sie eine neue Option eingeben, gefolgt von einem der Trennzeichen, um sie auszuwählen und der Optionsliste hinzuzufügen:

Siehe Stift Select2 - Tokenization von SitePoint (@sinepoint) auf CodePen.

templating

Eine der leistungsstärksten Merkmale von Select2 ist die Vorlagen. Durch Vorlagen können wir das von Select2 angezeigte Aussehen von Komponenten anpassen. Diese Funktion kann verwendet werden, um die minimale Eingabe zusammenzuführen, die durch das Options -Tag mit Bildern oder anderen Komponenten bereitgestellt wird, um eine visuelle Anzeige für den Benutzer zu erstellen.

Diese Beispielkombininen Select2 -Vorlagen mit den Glyphicons von Bootstrap:

Siehe die SELECT2 -Templatierung von SitePoint (@sitepoint) auf CodePen.

Schlussfolgerung

Obwohl ausgewählt wurde, bietet Select2 Select2 eher in Bezug auf die verfügbaren Funktionen für die Verwendung mit ausgewählten Kästchen. Ausgewählt ist eine gute Option, wenn Sie sie innerhalb des „Flusses“ Ihrer Website kombinieren. Wenn Sie jedoch auf fortgeschrittenere Funktionen zugreifen möchten, ist Select2 die bessere Wahl.

Ich würde dringend empfehlen, Select2 zu verwenden. Es wird öfter als ausgewählt und hat weniger Fehler. Eine Sache, die ich an Select2 sehr hilfreich fand, ist die Dokumentation. Während Sie es lesen, können Sie Select2 -Komponenten in Ihrem Projekt im laufenden Flug verwenden.

Wenn Sie gute oder schlechte Erfahrungen mit Auserwählten oder Select2 gemacht haben, lassen Sie es mich im Kommentarbereich unten wissen.

häufig gestellte Fragen (FAQs) zu jQuery auswählen Boxkomponenten: Ausgewählt gegen Select2

Was sind die wichtigsten Unterschiede zwischen ausgewählten und select2? Die wichtigsten Unterschiede zwischen ihnen liegen in ihren Merkmalen und ihrer Benutzerfreundlichkeit. Select2 unterstützt AJAX, wodurch es mit großen Datensätzen funktioniert, indem sie im laufenden Fliegen als Benutzertyp geladen werden. Es unterstützt auch Tagging und unendliches Scrollen. Andererseits unterstützt Ajax oder Tagging nicht, bietet jedoch eine benutzerfreundliche Suchfunktion und eine einfachere Oberfläche.

Wie implementiere ich Select2 in meinem Projekt? Anschließend können Sie SELECT2 in einem beliebigen Select -Feld initialisieren, indem Sie die $ (". MySelectBox"). Select2 () verwenden; Befehl. Sie können das Verhalten von Select2 auch anpassen, indem Sie Optionen an die Funktion Select2 () übergeben. Im selben Projekt wird es im Allgemeinen nicht empfohlen. Beide Plugins zielen darauf ab, die Funktionalität von ausgewählten Feldern zu verbessern, und sie können zusammen zu Konflikten und unerwarteten Verhaltensweisen führen. Wählen Sie am besten die aus, die Ihren Anforderungen am besten entspricht.

Wie kann ich das Erscheinungsbild von Select2 anpassen und ausgewählt? Sie können die Farben, Schriftarten, Größen und andere Aspekte ihres Aussehens ändern, indem Sie ihre Standardstile in Ihrer eigenen CSS -Datei überschreiben. Dank seiner AJAX-Unterstützung gut geeignet, um große Datensätze zu bearbeiten. Sie können Select2 so konfigurieren, dass Daten im laufenden Flug als Benutzertypen abgerufen werden. Dies verhindert, dass alle Daten im Voraus geladen werden müssen. Dies kann die Leistung bei der Arbeit mit großen Datensätzen erheblich verbessern. oder reagieren. Möglicherweise müssen Sie jedoch zusätzliche Wrapper oder Bibliotheken verwenden, um die Kompatibilität zu gewährleisten. Wenn Sie in einem in einem Feld ausgewählten Feld initialisieren, wird automatisch ein Suchfeld hinzugefügt. Benutzer können dieses Feld in dieses Feld eingeben, um die Optionen im Feld Auswählen zu filtern. Sie können diese Funktion aktivieren, indem Sie das Mehrfachattribut zu Ihrem Auswahlfeld hinzufügen. Wenn mehrere Auswahlen aktiviert sind, können Benutzer im Feld Auswählen mehr als eine Option auswählen. Browser, aber sie bieten auch nur begrenzte Unterstützung für mobile Geräte. Aufgrund der Vielzahl von mobilen Browsern und Geräten funktionieren einige Funktionen jedoch möglicherweise nicht wie erwartet. von Ereignissen, auf die Sie zuhören und darauf reagieren können. Sie können beispielsweise das Change -Ereignis anhören, um eine Funktion auszuführen, wenn der Benutzer eine Auswahl trifft. Sie können Ereignishörer mit der .on () -Methode in jQuery anhängen.

Das obige ist der detaillierte Inhalt vonJQuery auswählen Boxkomponenten - ausgewählt VS SELECT2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!