jQuery UI Beispiel - automatisch (Autocomplete)
Such- und Filterwert basierend auf Benutzereingaben, so dass Anwender schnell zu finden und wählen Sie aus einer Liste von voreingestellten Werten.
Für weitere Informationen über das Auto - Vervollständigen - Komponente finden Sie in der API - Dokumentation automatisch Mitglied (die automatische Vervollständigung der Widget) .
In diesem Bereich können herunterladen search.php .
Die Standardfunktion
Wenn Sie Eingabefeld automatisch erfolgen (Autocomplete) Mitglieder beraten. In diesem Beispiel wird eine empfohlene Option Programmiersprache zur Verfügung gestellt, können Sie eingeben "ja" versuchen Sie es, können Sie Java oder JavaScript zu bekommen.
Die Datenquelle ist eine einfache JavaScript-Array unter Verwendung einer Quelle Optionen an Mitglieder zur Verfügung stehen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"Actionscript",
"Apple",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"Coldfusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
Quelle: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Tags"> Tag: </ label>
<Input id = "Tags">
</ Div>
</ Body>
</ Html>
Accented
mit Quellenoptionen zur automatischen Vervollständigung Feld die Ergebnisse anpassen Artikel mit akzentuierten Zeichen übereinstimmen, auch wenn das Textfeld wird nicht mit enthalten Zeichen mit Akzent. Aber wenn Sie akzentuierte Zeichen in einem Textfeld eingeben, ist es nicht die Ergebnisse der nicht-Stress-Elemente anzuzeigen.
Versuchen Sie, "Jo", sehen Sie "John" und "Jorn", geben Sie dann "Jo", wird nur sehen "Jorn" eingeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - akzentuiert </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig"];
var accentMap = {
"A": "a",
"Ö": "o"
};
var normalisieren = function (term) {
var ret = "";
for (var i = 0; i <term.length; i ++) {
ret + = accentMap [term.charAt (i)] || term.charAt (i);
}
Rückkehr ret;
};
$ ( "#developer") .autocomplete ({
Quelle: function (Request, Response) {
var Matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
Antwort ($ .grep (Namen, Funktion (Wert) {
Wert = value.label || || value.value Wert;
Rückkehr matcher.test (Wert) || matcher.test (normalisieren (Wert));
}));
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Form>
<Label for = "Entwickler"> Entwickler: </ label>
<Input id = "Entwickler">
</ Form>
</ Div>
</ Body>
</ Html>
Einstufung
Suchergebnis Klassifizierung. Versuchen Sie "a" oder "n" eingeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - Kategorie </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Kategorie {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</ Style>
<Script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu: function (ul, items) {
var, die diese =,
currentCategory = "";
$ .each (Artikel, Funktion (Index, item) {
if (item.category! = currentCategory) {
ul.append ( "<li class = 'ui-Auto-Vervollständigen-Kategorie'>" + item.category + "</ li>");
currentCategory = item.category;
}
that._renderItemData (ul, item);
});
}
});
</ Script>
<Script>
$ (Function () {
var data = [
{Label: "anders", Kategorie: ""},
{Label: "andreas", Kategorie: ""},
{Label: "Antal", Kategorie: ""},
{Label: "annhhx10", Kategorie: "Produkte"},
{Label: "annk K12", Kategorie: "Produkte"},
{Label: "annttop C13", Kategorie: "Produkte"},
{Label: "Anders Andersson", Kategorie: "People"},
{Label: "Andreas Andersson", Kategorie: "People"},
{Label: "andreas Johnson", Kategorie: "People"}
];
$ ( "#search") .catcomplete ({
Verzögerung: 0,
Quelle: Daten
});
});
</ Script>
</ Head>
<Body>
<Label for = "suchen"> Suche: </ label>
<Input id = "suchen">
</ Body>
</ Html>
Kombinationsfeld (Combobox)
Eine benutzerdefinierte Komponente, die durch die automatische Vervollständigung und Button erstellt. Sie können einige Zeichen eingeben, um auf Ihre Eingangsfilterung Ergebnisse erhalten basiert, oder aus der vollständigen Liste wählen mit den Tasten.
Der Eingang wird von einer vorhandenen Auswahlelemente zu lesen, auf die automatische Vervollständigung Option übergeben zu haben, die Quelle anpassen.
Dies ist kein perfektes Mitglied nicht unterstützt. Hier ist einfach der automatischen Vervollständigung Anpassungsmöglichkeiten zu demonstrieren. Für weitere Details zu diesem Teil funktioniert, klicken Sie bitte hier die jQuery Artikel anzuzeigen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - Kombinationsfeld (Combobox) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.custom-Combobox {
position: relative;
display: inline-block;
}
.custom-Combobox-Toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/ * Support: IE7 * /
* Höhe: 1.7em;
* Oben: 0.1em;
}
.custom-Combobox-Eingang {
margin: 0;
padding: 0.3em;
}
</ Style>
<Script>
(Function ($) {
$ .widget ( "Custom.combobox", {
_create: function () {
this.wrapper = $ ( "<span>")
.addClass ( "custom-Combobox")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
},
_createAutocomplete: function () {
var ausgewählt = this.element.children ( ": ausgewählt"),
Wert = selected.val () selected.text (): "";?
this.input = $ ( "<input>")
.appendTo (this.wrapper)
.val (Wert)
.attr ( "title", "")
.addClass ( "custom-Combobox-Eingang ui-ui-Widget-Widget-Inhalte ui-State-default ui-Ecke links")
.autocomplete ({
Verzögerung: 0,
minLength: 0,
Quelle: $ .proxy (this, "_Source")
})
.tooltip ({
tooltipClass: "ui-state-Highlight"
});
this._on (this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger ( "select", Veranstaltung, {
Artikel: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$ ( "<a>")
.attr ( "tabIndex", -1)
.attr ( "title", "Alle Artikel anzeigen")
.tooltip ()
.appendTo (this.wrapper)
.Taste ({
Symbole: {
Primär: "ui-icon-Dreieck-1-s"
},
Text: false
})
.removeClass ( "ui-Ecke-all")
.addClass ( "custom-Combobox-Toggle-ui-Ecke rechts")
.mousedown (function () {
wasOpen = input.autocomplete ( "Widget") .ist ( "Sichtbar");
})
.click (function () {
input.focus ();
// Wenn Sie geschlossen angesehen, wenn (wasOpen) {
Rückkehr;
}
// Übergeben Sie einen leeren String als Wert für die Suche, die alle Ergebnisse input.autocomplete ( "Suche", "") zeigt;
});
},
_Source: function (Request, Response) {
var Matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
Antwort (this.element.children ( "Option") .map (function () {
var text = $ (this) .text ();
if (this.value && (! request.term || matcher.test (Text)))
Rückkehr {
Label: Text,
Wert: Text,
Option: Diese
};
}));
},
_removeIfInvalid: function (event, ui) {
// Wählen Sie ein Element und führt keine anderen Aktionen, wenn (ui.item) {
Rückkehr;
}
// Suche nach einer Übereinstimmung (Groß- und Kleinschreibung)
var value = this.input.val (),
valueLowerCase = value.toLowerCase (),
gültig = false;
this.element.children ( "Option") .each (function () {
if ($ (this) .text (). toLowerCase () === valueLowerCase) {
this.selected = gültig = true;
return false;
}
});
// Eine Übereinstimmung gefunden wird, keine andere Aktion, wenn (gültig) {
Rückkehr;
}
// Entfernen Sie den ungültigen Wert this.input
.val ( "")
.attr ( "title", Wert + "wurden keine Artikel")
.tooltip ( "open");
this.element.val ( "");
this._delay (function () {
this.input.tooltip ( "close") .attr ( "title", "");
}, 2500);
this.input.data ( "ui-Auto-Vervollständigen") .term = "";
},
_destroy: function () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery);
$ (Function () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") .click (Function () {
$ ( "#combobox") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label> Ihre bevorzugte Programmiersprache: </ label>
<Wählen Sie id = "Combobox">
<Option value = ""> wählen ... </ option>
<Option value = "Actionscript"> Actionscript </ option>
<Option value = "Applescript"> Apple </ option>
<Option value = "Asp"> Asp </ option>
<Option value = "BASIC"> BASIC </ option>
<Option value = "C"> C </ option>
<Option value = "C ++"> C ++ </ option>
<Option value = "Clojure"> Clojure </ option>
<Option value = "COBOL"> COBOL </ option>
<Option value = "Coldfusion"> Coldfusion </ option>
<Option value = "Erlang"> Erlang </ option>
<Option value = "Fortran"> Fortran </ option>
<Option value = "Groovy"> Groovy </ option>
<Option value = "Haskell"> Haskell </ option>
<Option value = "Java"> Java </ option>
<Option value = "JavaScript"> JavaScript </ option>
<Option value = "Lisp"> Lisp </ option>
<Option value = "Perl"> Perl </ option>
<Option value = "PHP"> PHP </ option>
<Option value = "Python"> Python </ option>
<Option value = "Ruby"> Rubin </ option>
<Option value = "Scala"> Scala </ option>
<Option value = "Scheme"> Scheme </ option>
</ Select>
</ Div>
<Button id = "Toggle"> Anzeige basierte Auswahlbox </ button>
</ Body>
</ Html>
Benutzerdefinierte Daten und Anzeige
Sie können einen benutzerdefinierten Datenformat verwenden, und durch einfaches Fokussieren des Standardverhalten ändern und wählen Sie die Daten anzuzeigen.
Versuchen Sie "j" oder drücken Sie die Pfeiltaste nach unten, können Sie eine Liste der Elemente erhalten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - kundenspezifische Daten und zeigt </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Projekt-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
# Projekt-Symbol {
float: left;
Höhe: 32px;
Breite: 32px;
}
# Projekt-Beschreibung {
margin: 0;
padding: 0;
}
</ Style>
<Script>
$ (Function () {
var Projekte = [
{
Wert: "jquery",
Label: "jQuery",
desc: "die Schreib weniger, mehr tun, JavaScript-Bibliothek",
Symbol: "jquery_32x32.png"
},
{
Wert: "jquery-ui",
Label: "jQuery UI",
desc: "die offizielle Benutzeroberfläche Bibliothek für jQuery",
Symbol: "jqueryui_32x32.png"
},
{
Wert: "sizzlejs",
label: "Sizzle JS",
desc: "eine reine JavaScript CSS-Selektor-Engine",
Symbol: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
minLength: 0,
Quelle: Projekte,
Fokus: function (event, ui) {
$ ( "#project") .val (Ui.item.label);
return false;
},
wählen: function (event, ui) {
$ ( "#project") .val (Ui.item.label);
$ ( "# Projekt-ID") .val (ui.item.value);
$ ( "# Projekt-Beschreibung") .html (ui.item.desc);
$ ( "# Projekt-Symbol") .attr ( "src", "images /" + ui.item.icon);
return false;
}
})
.data ( "ui-Auto-Vervollständigen") ._ renderItem = function (ul, item) {
return $ ( "<li>")
.append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo (ul);
};
});
</ Script>
</ Head>
<Body>
<Div id = "Projekt-label"> Wählen Sie ein Element (Typ "j"): </ div>
<Img id = "Projekt-Symbol" src = "images / transparent_1x1.png" class = "ui-state-default" alt = "">
<Input id = "Projekt">
<Input type = "hidden" id = "Projekt-id">
<P id = "Projekt-Beschreibung"> </ p>
</ Body>
</ Html>
Mehrere Werte
Verbrauch: Geben Sie einige Zeichen, wie "j", können Sie die Ergebnisse einschlägiger Programmiersprachen zu sehen. Wählen Sie einen Wert, und geben Sie die Zeichen weiterhin einen Mehrwert hinzuzufügen.
Dieses Beispiel zeigt, wie Quellenoptionen zu verwenden und Ereignisse im Wert eines einzelnen Textfeld zu erreichen, mehrere automatische einzugeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - mehrere Werte </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"Actionscript",
"Apple",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"Coldfusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
Funktion split (val) {
Rückkehr val.split (/ \ s * /);
}
Funktion extractLast (term) {
SPLIT (term) .pop ();
}
$ ( "#tags")
// Wenn Sie ein Element auswählen, ohne das Textfeld .bind verlassen ( "keydown", Funktion (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (This) .data ( "ui-Auto-Vervollständigen") .menu.active) {
Event.preventDefault ();
}
})
.autocomplete ({
minLength: 0,
Quelle: function (Request, Response) {
// Zurück zur automatischen Vervollständigung, aber der letzte Eintrag Antwort ($ .ui.autocomplete.filter zu extrahieren (
availableTags, extractLast (request.term)));
},
Schwerpunkt: function () {
// Prevent Erhalt Fokus Einsatz Werte return false;
},
wählen: function (event, ui) {
var Begriffe = split (this.value);
// Entfernen Sie den Stromeingang terms.pop ();
// Fügen Sie die gewählte Option terms.push (ui.item.value);
// Add einen Platzhalter, fügen Sie ein Komma am Ende von + Leer terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Tags"> Programmiersprachen: </ label>
<Input id = "Tags" size = "50">
</ Div>
</ Body>
</ Html>
Mehrere Werte, Fern
Verbrauch: Geben Sie die zwei Zeichen zumindest die Namen der Vögel zu bekommen. Wählen Sie einen Wert, und geben Sie die Zeichen weiterhin einen Mehrwert hinzuzufügen.
Dieses Beispiel zeigt, wie Quellenoptionen zu verwenden und Ereignisse im Wert eines einzelnen Textfeld zu erreichen, mehrere automatische einzugeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - mehrere Werte, Fern </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Laden {
Hintergrund: white url ( 'images / ui-anim_basic_16x16.gif') rechts von der Mitte no-repeat;
}
</ Style>
<Script>
$ (Function () {
Funktion split (val) {
Rückkehr val.split (/ \ s * /);
}
Funktion extractLast (term) {
SPLIT (term) .pop ();
}
$ ( "#birds")
// Wenn Sie ein Element auswählen, ohne das Textfeld .bind verlassen ( "keydown", Funktion (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (This) .data ( "ui-Auto-Vervollständigen") .menu.active) {
Event.preventDefault ();
}
})
.autocomplete ({
Quelle: function (Request, Response) {
$ .getJSON ( "Search.php", {
Begriff: extractLast (request.term)
}, Response);
},
Suche: function () {
// Benutzerdefinierte Mindestlänge var term = extractLast (this.value);
if (term.length <2) {
return false;
}
},
Schwerpunkt: function () {
// Prevent Erhalt Fokus Einsatz Werte return false;
},
wählen: function (event, ui) {
var Begriffe = split (this.value);
// Entfernen Sie den Stromeingang terms.pop ();
// Fügen Sie die gewählte Option terms.push (ui.item.value);
// Add einen Platzhalter, fügen Sie ein Komma am Ende von + Leer terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Vögel"> Bird: </ label>
<Input id = "Vögel" size = "50">
</ Div>
</ Body>
</ Html>
Ferndatenquelle JSONP
Wenn Sie Zeichen in einem Textfeld eingeben, automatische Vervollständigung Komponenten geben Ratschläge Ergebnisse. In diesem Beispiel, wenn Sie mindestens zwei Zeichen in einem Textfeld eingeben, wird es den Namen der jeweiligen Stadt angezeigt werden soll.
In diesem Beispiel ist die Datenquelle geonames.org WebService . Obwohl die Auswahl eines Textfeldes nach dem Element ist der Name der Stadt, aber mehr Informationen, um den richtigen Eintrag zu finden, anzuzeigen. Die Daten können auch ein Callback sein, die Ergebnisse angezeigt werden in der unten stehenden Tabelle.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - JSONP fernen Datenquelle </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Laden {
Hintergrund: white url ( 'images / ui-anim_basic_16x16.gif') rechts von der Mitte no-repeat;
}
#city {width: 25em;}
</ Style>
<Script>
$ (Function () {
Funktion log (message) {
$ ( "<Div>") .text (Nachricht) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
Quelle: function (Request, Response) {
$ .ajax ({
url: "http://ws.geonames.org/searchJSON",
datatype: "JSONP",
Daten: {
featureClass: "P",
Stil: "voll",
maxRows: 12,
name_startsWith: request.term
},
Erfolg: function (data) {
Antwort ($ .map (data.geonames, function (item) {
Rückkehr {
Label: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
Wert: item.name
}
}));
}
});
},
minLength: 2,
wählen: function (event, ui) {
log (ui.item?
"Ausgewählt:" + ui.item.label:
"Nichts ausgewählt wurde Eingang" + this.value);
},
öffnen: function () {
$ (This) .removeClass ( "ui-Ecke-all") .addClass ( "ui-Ecke-top");
},
schließen: function () {
$ (This) .removeClass ( "ui-Ecke-top") .addClass ( "ui-Ecke-all");
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Stadt"> Ihre Stadt: </ label>
<Input id = "Stadt">
Angetrieben von <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
<Div class = "ui-Widget" style = "margin-top: 2em; font-family: Arial">
Ergebnisse:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-Widget-content"> </ div>
</ Div>
</ Body>
</ Html>
Die Remote-Datenquelle
Wenn Sie Zeichen in einem Textfeld eingeben, automatische Vervollständigung Komponenten geben Ratschläge Ergebnisse. In diesem Beispiel, wenn Sie mindestens zwei Zeichen in einem Textfeld eingeben, werden die entsprechenden Namen der Vögel anzeigen.
In diesem Beispiel wird die Datenquelle JSON-Daten serverseitiges Skript zurückgegeben eine einfache Quellenoptionen angeben. Darüber hinaus ist minLength Option 2, stellen Sie die Abfrage gibt zu viele Ergebnisse, wählen Sie das Ereignis zu vermeiden, ein Feedback angezeigt werden soll.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - Remote-Datenquelle </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Laden {
Hintergrund: white url ( 'images / ui-anim_basic_16x16.gif') rechts von der Mitte no-repeat;
}
</ Style>
<Script>
$ (Function () {
Funktion log (message) {
$ ( "<Div>") .text (Nachricht) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
Quelle: "search.php",
minLength: 2,
wählen: function (event, ui) {
log (ui.item?
"Ausgewählt:" + ui.item.value + "aka" + ui.item.id:
"Nichts ausgewählt wurde Eingang" + this.value);
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Vögel"> Bird: </ label>
<Input id = "Vögel">
</ Div>
<Div class = "ui-Widget" style = "margin-top: 2em; font-family: Arial">
Ergebnisse:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-Widget-content"> </ div>
</ Div>
</ Body>
</ Html>
Remote-Cache
Wenn Sie Zeichen in einem Textfeld eingeben, automatische Vervollständigung Komponenten geben Ratschläge Ergebnisse. In diesem Beispiel, wenn Sie mindestens zwei Zeichen in einem Textfeld eingeben, werden die entsprechenden Namen der Vögel anzeigen.
Zur Verbesserung der Leistung, fügen Sie hier ein paar lokalen Cache, andere Instanzen von ähnlichen entfernten Datenquellen. Hier ist nur eine Abfrage-Cache gespeichert, und der Cache kann auf mehrere Werte erweitert werden, wobei jeder Eintrag ist ein Wert.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - Remote-Cache </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Laden {
Hintergrund: white url ( 'images / ui-anim_basic_16x16.gif') rechts von der Mitte no-repeat;
}
</ Style>
<Script>
$ (Function () {
var cache = {};
$ ( "#birds") .autocomplete ({
minLength: 2,
Quelle: function (Request, Response) {
var term = request.term;
if (Ausdruck im Cache) {
Antwort (Cache [Begriff]);
Rückkehr;
}
$ .getJSON ( "Search.php", Anfrage, function (Daten, Status, XHR) {
Cache [Begriff] = Daten;
Antwort (Daten);
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Vögel"> Bird: </ label>
<Input id = "Vögel">
</ Div>
</ Body>
</ Html>
Scrollbare Ergebnis
Wenn eine lange Liste von Optionen anzuzeigen, können Sie einfach max-height gesetzt Auto-Vervollständigen-Menü zu verhindern, dass zu das Menü angezeigt werden soll. Versuchen Sie "a" oder "s" zu bekommen das Ergebnis einer langen scrollbaren Liste eingeben.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - scrollbare Ergebnis </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen {
max-height: 100px;
Überlauf-y: auto;
Verhindern / * die horizontale Bildlaufleiste * /
Überlauf-x: hidden;
}
/ * IE 6 unterstützt nicht die max-height
* Wir verwenden statt der Höhe, aber das wird das Menü zwingen, immer als die Höhe angezeigt wird * /
* Html .ui-Auto-Vervollständigen {
Höhe: 100px;
}
</ Style>
<Script>
$ (Function () {
var availableTags = [
"Actionscript",
"Apple",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"Coldfusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
Quelle: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Tags"> Tag: </ label>
<Input id = "Tags">
</ Div>
</ Body>
</ Html>
XML-Daten
Dieses Beispiel zeigt, wie einige XML-Daten zu erhalten und verwendet jQuery Methode, um es zu lösen und bieten es als Datenquelle automatisch zu vervollständigen.
In diesem Beispiel wird auch als Lösung eine Remote-XML-Datenquelle Referenz verwendet werden - Analyse treten bei jeder Quelle Rückrufanfrage.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Auto-Vervollständigung (Autocomplete) - XML-Daten </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-Auto-Vervollständigen-Laden {background: white url ( 'images / ui-anim_basic_16x16.gif') rechts von der Mitte no-repeat;}
</ Style>
<Script>
$ (Function () {
Funktion log (message) {
$ ( "<Div />") .text (Nachricht) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
url: "london.xml",
datatype: "xml",
Erfolg: function (XMLResponse) {
var data = $ ( "geoname", XMLResponse) .map (function () {
Rückkehr {
Wert: $ ( "name", this) .text () + "," +
($ .trim ($ ( "Countryname", this) .text ()) || "(unbekanntes Land)"),
id: $ ( "geonameId", this) .text ()
};
Holen}) ().
$ ( "#birds") .autocomplete ({
Quelle: Daten,
minLength: 0,
wählen: function (event, ui) {
log (ui.item?
"Ausgewählt:" + ui.item.value + ", geonameId:" + ui.item.id:
"Nichts ausgewählt wurde Eingang" + this.value);
}
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-Widget">
<Label for = "Vögel"> London Match: </ label>
<Input id = "Vögel">
</ Div>
<Div class = "ui-Widget" style = "margin-top: 2em; font-family: Arial">
Ergebnisse:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-Widget-content"> </ div>
</ Div>
</ Body>
</ Html>