JqueryUI Autocomplete-Widget

Der Automatische Vervollständigung ist ein wichtiger Bestandteil des modernen Rich-Web-Interfaces. Der jQueryUI Das Autovervollständigungs-Widget ist eine Funktion, die es Benutzern ermöglicht, während der Eingabe Werte aus einer Liste zu suchen und auszuwählen. Es bietet Vorschläge zum Suchbegriff in einem Texteingabefeld. Für den Autovervollständigungsmechanismus können die Daten eine statische Quelle sein und wir müssen nur Daten aus der Remote-Datenbank abrufen. Es macht die Einrichtung ziemlich einfach und bietet den Benutzern ein reibungsloses Erlebnis. Es funktioniert mit vorab ausgefüllten Listen, die Eingaben empfangen und mit vordefinierten Einträgen verknüpft werden können.

Das Widget zur automatischen Vervollständigung verhält sich wie ein Dropdown-Menü. Es beginnt mit der Suche nach einer vordefinierten Liste von Einträgen, während der Benutzer einen Wert in das Textfeld eingibt, um eine Übereinstimmung zu finden. Wenn wir mehr Zeichen eingeben, wird eine Liste der weiteren Einträge angezeigt, bis das richtige Feld ausgewählt ist und wir die Liste leicht nach besseren Übereinstimmungen filtern können.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Die Akkordeonmethode kann in folgenden Formen angewendet werden:

  • $(Selektor, Kontext). Schaltfläche (Optionen)
  • $(Selektor, Kontext). button(„Aktionen“, [params])

Das folgende Beispiel demonstriert die einfache Funktionalität des Autovervollständigungs-Widgets:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList
		});
	 });
</script>
</head>
<body>
<h2>Simple Autocomplete Example</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • Das obige Skript verwendet den Mechanismus der automatischen Vervollständigung, um eine Liste mit Vorschlägen für den Wortanfang bereitzustellen, während der Benutzer etwas in das Textfeld eingibt.
  • Wir haben eine Variable namens „myList“ verwendet, die eine Reihe von Wörtern enthält und wie ein Dropdown-Menü mit einer Reihe von Wörtern angezeigt wird.
  • Die Zeile „Quelle: myList“ gibt den Quellnamen an, der dem Widget mitteilt, woher es die Vorschläge für das Autovervollständigungsmenü bezieht.
  • Wenn wir das Skript ausführen, wird das Autocomplete-Ereignis mithilfe des ID-Selektors „#myval“ ausgelöst und verweist auf den Quellspeicherort „myList“, um die Liste der Vorschläge für den Wortanfang anzuzeigen, wenn der Benutzer sie in das Textfeld eingibt.

Führen Sie die JQueryUI Simple Autocomplete-Demo aus
Beispiel für eine einfache automatische Vervollständigung von JQueryUI

Autocomplete-Widget-Optionen

Das Autovervollständigungs-Widget enthält folgende Optionen:

Option Beschreibung Standardwert

AnhängenEs bestimmt, welches Element an das Menü angehängt werden soll.Null
AutofokusEs bestimmt, ob bei der Einstellung „true“ dem ersten Element in der Liste der Fokus gegeben wird, wenn die Liste angezeigt wird.FALSCH
VerzögerungEs zeigt die Zeit in Millisekunden zwischen Tastendruck und passendem Wert an.300
deaktiviertEs deaktiviert die automatische Vervollständigung, wenn es auf „true“ gesetzt ist, dh es stoppt den Autovervollständigungsvorgang.FALSCH
minimale LängeEs gibt die Anzahl der Zeichen an, die eingegeben werden müssen, bevor nach Vorschlägen gesucht wird.1
PositionEs bestimmt die Position des Vorschlagsmenüs, das dem Eingabeelement angezeigt wird, mit dem es verknüpft ist.{ mein: „links oben“, „at:“ links unten“, Kollision: „none“ }
QuelleEs teilt dem Widget mit, woher es die Vorschläge für das Autovervollständigungsmenü beziehen kann.keiner; muss angegeben werden

Das folgende Beispiel zeigt die Verwendung der Optionen „minLength“, „delay“ und „source“:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList,
		   minLength: 2,
		   delay: 800
		});
	 });
</script>
</head>
<body>
<h2> Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • Das Skript verwendet verschiedene Arten von Autovervollständigungsoptionen wie minLength, Verzögerung und Quelle.
  • Die Option minLength gibt die Mindestanzahl an Zeichen an, die eingegeben werden müssen, bevor eine Suche nach Vorschlägen durchgeführt wird. Wir haben eine Mindestlänge von 2 Zeichen definiert, die nach Eingabe von zwei Zeichen die Liste der Vorschläge anzeigt.
  • Die Verzögerung bestimmt die Zeit zwischen Tastendruck und Beginn einer Suche. Hier haben wir eine Wartezeit von 800 Millisekunden angegeben, bevor wir versuchen, die passenden Werte zu erhalten.
  • Die Quelloption definiert die zu verwendenden Daten, die dem Widget mitteilen, woher es die Vorschläge für das Autovervollständigungsmenü beziehen soll. Hier lautet der Quellname „myList“, der eine Reihe von Wörtern enthält, die als Vorschlagsliste angezeigt werden sollen, wenn der Benutzer etwas in das Textfeld eingibt.
  • Das Autocomplete-Ereignis wird mithilfe des ID-Selektors „#myval“ ausgelöst und verwendet die oben genannten Optionen, um die angegebene Aufgabe auszuführen.

Führen Sie die Demo zu den Optionen für die automatische Vervollständigung von JQueryUI aus

Beispiel für Optionen zur automatischen Vervollständigung von JQueryUI

Das folgende Beispiel zeigt die Verwendung der AutoFocus-Option:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList,
		   autoFocus: true
		});
	 });
</script>
</head>
<body>
<h2>Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • Das Programm verwendet eine Autovervollständigungsoption, die als Autofokus bezeichnet wird.
  • Die AutoFocus-Option bestimmt, ob das erste Element in der Liste den Fokus erhält, wenn die Liste angezeigt wird.
  • Wenn wir das Skript ausführen, gibt der Benutzer den Text ein und das erste Element erhält den Fokus in der Vorschlagsliste, da sein Wert auf „true“ gesetzt ist. Wenn es auf „false“ gesetzt ist, erhält das erste Element nicht den Fokus.

Führen Sie JQueryUI Autocomplete Options Demo1 aus

Beispiel für Optionen zur automatischen Vervollständigung von JQueryUI1

Widget-Methoden zur automatischen Vervollständigung

Die folgende Tabelle zeigt einige der Methoden, die mit dem Autovervollständigungs-Widget verwendet werden:

Methodenbeschreibung

zerstören()Dadurch wird die Autovervollständigungsfunktion vollständig entfernt.
deaktivieren()Diese Methode deaktiviert die Aktivität des Autovervollständigungsmechanismus.
aktivieren()Diese Methode ermöglicht die Aktivität des Autovervollständigungsmechanismus.
Optionen()Es gibt die Optionseigenschaft zurück. Es stellt die Werte der Autovervollständigungsoptionen dar.
schließenDadurch wird das Autovervollständigungsmenü geschlossen und die Liste der Vorschläge aus diesem Menü ausgeblendet.
suchenEs löst ein Suchereignis zwischen dem Zeichenfolgenwert und der Datenquelle aus.
widget()Es definiert das Schaltflächen-Widget-Element mit dem jQuery-Objekt.

Das folgende Beispiel erläutert die Verwendung der Autovervollständigungs-Suchmethode:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "c++","php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList
		});
		$("#myButton").click(function(){
		   $("#myval").autocomplete("search","ja").focus();
	 });
	 });
</script>
</head>
<body>
<h2>Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
	 <input type="button" id="myButton" value="go">
</body>
</html>
  • Das Skript nutzt die Suchmethode zur automatischen Vervollständigung, die ein Suchereignis zwischen dem Zeichenfolgenwert und der Datenquelle auslöst.
  • Das Skript sucht in der Liste der Wortsätze nach Elementen, die mit „j“ beginnen, indem es den ID-Selektor „#myval“ verwendet, der die Elemente aus der Quelle „myList“ auswählt.

Führen Sie die Demo zu den JQueryUI-Autovervollständigungsmethoden aus

Beispiel für JQueryUI-Autovervollständigungsmethoden

Autocomplete-Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit dem Autovervollständigungs-Widget verwendet werden:

Eventbeschreibung

change(event, ui)Dieses Ereignis wird ausgelöst, wenn das Eingabeelement geändert wird.
create(event, ui)Es wird ausgelöst, wenn eine automatische Vervollständigung erstellt wird.
close(event, ui)Es wird ausgelöst, wenn das Autovervollständigungs-Widget das Menü schließt.
Fokus (Ereignis, Benutzeroberfläche)Es wird ausgelöst, wenn der Fokus auf das Element verschoben wird.
open(event, ui)Es zeigt an, dass das Autovervollständigungsereignis das Vorschlagsmenü öffnen wird.
Antwort (Ereignis, Benutzeroberfläche)Es wird ausgelöst, nachdem eine Suche abgeschlossen ist, bevor das Menü angezeigt wird.
Suche (Ereignis, Benutzeroberfläche)Es wird ausgelöst, nachdem minLength und Verzögerung erfüllt sind.
select(event, ui)Es wird ausgelöst, wenn ein Wert aus dem Menü ausgewählt wird.

Das folgende Beispiel veranschaulicht die Verwendung von Auswahl- und Fokusereignissen für die automatische Vervollständigung:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	$(function() {
		var myList = [
		{
		   value: "c",
		   label: "C",
		   desc: "It is general-purpose programming language",
		},
		{
		   value: "html",
		   label: "HTML",
		   desc: "It is Hypertext Markup Language",
		},
		{
		   value: "php",
		   label: "PHP",
		   desc: "It is open source general-purpose scripting language",
		}
		 ];
		 $( "#myval" ).autocomplete({
			source: myList,
			focus: function( event, ui ) {
			   $( "#myval" ).val( ui.item.label );
				  return false;
			},
			select: function( event, ui ) {
			   $( "#myval" ).val( ui.item.label );
			   $( "#myval1" ).val( ui.item.value );
			   $( "#myval2" ).html( ui.item.desc );
			   return false;
			}
		 })
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li>" )
	.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
	.appendTo( ul );
	 };
   });
</script>
</head>
<body>
	<label for="myval">Enter the search value: </label><br>
	<input id="myval">
	<input type="hidden" id="myval1">
	<p id="myval2"></p>
</body>
</html>
  • Das Skript verwendet Autovervollständigungsereignisse wie „Auswählen“ und „Fokus“.
  • Das Select-Ereignis wird ausgelöst, wenn ein Wert aus dem Menü ausgewählt wird.
  • Das Fokusereignis wird immer dann ausgelöst, wenn Menüoptionen den Fokus erhalten.
  • Wir haben drei Arten von Optionen verwendet, nämlich Wert, Beschriftung und Beschreibung zum Speichern der Werte.
  • Wenn wir das Skript ausführen, geben wir das Wort ein, das aus der Vorschlagsliste ausgewählt werden soll. Wenn wir beispielsweise als HTML in das Textfeld schreiben, wird die Beschreibung des ausgewählten Elements außerhalb des Textfelds angezeigt.
  • Die Zeile .data( „ui-autocomplete“ )._renderItem = function( ul, item ) verwendet den Erweiterungspunkt _renderItem der automatischen Vervollständigung, der die Erstellung jeder Option im Menü des Widgets steuert. Es erstellt ein neues Element, hängt es an das Menü an und gibt es zurück.

Führen Sie die JQueryUI Autocomplete Events-Demo aus

Beispiel für JQueryUI-Autocomplete-Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen