jQuery UI esempio - automaticamente (Autocomplete)
Ricerca e valore del filtro in base all'input dell'utente, permettendo agli utenti di trovare rapidamente e selezionare da un elenco di valori predefiniti.
Per maggiori dettagli sulla componente di completamento automatico, consultare la documentazione API automaticamente membro (il completamento automatico il Widget) .
Utilizzare questa sezione per search.php scaricare .
La funzione di default
Quando campo di input, fatto automaticamente (completamento automatico) membri forniscono consulenza. In questo esempio, è previsto un linguaggio di programmazione opzione consigliata, è possibile immettere "ja" provare, è possibile ottenere Java o JavaScript.
L'origine dati è un semplice array JavaScript utilizzando sono a disposizione dei soci un opzioni di origine.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
fonte: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "tag"> tag: </ label>
<Input id = "tag">
</ Div>
</ Corpo>
</ Html>
accentati
campo di completamento automatico utilizzando le opzioni di origine per personalizzare i risultati per abbinare gli elementi con caratteri accentati, anche se il campo di testo non contiene caratteri accentati corrisponderà. Ma se si digita i caratteri accentati in un campo di testo, che non visualizza i risultati delle partite non-stress.
Provate a digitare "Jo", si vede "John" e "Jorn", quindi digitare "Jo", servirà solo a vedere "Jorn".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - accentata </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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": "o"
};
var normalizzare = function (termine) {
var ret = "";
for (var i = 0; i <term.length; i ++) {
ret + = accentMap [term.charAt (i)] || term.charAt (i);
}
tornare ret;
};
$ ( "#developer") .autocomplete ({
fonte: la funzione (richiesta, risposta) {
var Matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
risposta ($ .grep (nomi, la funzione (valore) {
value = value.label || value.value || valore;
tornare matcher.test (valore) || matcher.test (normalizzare (valore));
}));
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Form>
<Label for = "sviluppatore"> Developer: </ label>
<Input id = "sviluppatore">
</ Form>
</ Div>
</ Corpo>
</ Html>
classificazione
Ricerca di una classificazione risultato. Provate a digitare "a" o "n".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - Categoria </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico-categoria {
font-weight: bold;
padding: .2em .4em;
margin: 0 .8em .2em;
line-height: 1.5;
}
</ Style>
<Script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu: function (UL, articoli) {
var = che questo,
currentCategory = "";
$ .Ogni (Elementi, la funzione (indice, voce) {
if (item.category! = currentCategory) {
ul.append ( "<li class = 'ui-completamento automatico-categoria'>" + item.category + "</ li>");
currentCategory = item.category;
}
that._renderItemData (UL, voce);
});
}
});
</ Script>
<Script>
$ (Function () {
dati var = [
{Etichetta: "anders", categoria: ""},
{Etichetta: "Andreas" ha, categoria: ""},
{Etichetta: "Antal", categoria: ""},
{Etichetta: "annhhx10", categoria: "Prodotti"},
{Etichetta: "annk K12", categoria: "Prodotti"},
{Etichetta: "annttop C13", categoria: "Prodotti"},
{Etichetta: "Anders Andersson", categoria: "Persone"},
{Etichetta: "Andreas Andersson", categoria: "Persone"},
{Etichetta: "Andreas Johnson", categoria: "La gente"}
];
$ ( "#search") .catcomplete ({
Ritardo: 0,
fonte: dati
});
});
</ Script>
</ Head>
<Body>
<Label for = "search"> Ricerca: </ label>
<Id ingresso = "ricerca">
</ Corpo>
</ Html>
Combo box (Combobox)
Un componente personalizzato creato dal completamento automatico e Button. È possibile digitare alcuni caratteri per ottenere in base ai risultati di filtraggio in ingresso, o scegliere tra la lista completa con i tasti.
L'ingresso viene letto da un elementi selezionati esistenti, dopo aver passato all'opzione completamento automatico di personalizzare la fonte.
Questo non è un membro perfetta non supportato. Qui è sufficiente per dimostrare le caratteristiche di personalizzazione di completamento automatico. Per maggiori dettagli su questa parte funziona, clicca qui per visualizzare gli articoli jQuery.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - casella combinata (Combobox) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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-ginocchiera {
position: absolute;
top: 0;
in basso: 0;
margin-left: -1px;
padding: 0;
/ * Supporto: IE7 * /
* Altezza: 1.7em;
* Top: 0.1em;
}
.custom-combobox-input {
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 = selezionato this.element.children ( ": selezionati"),
value = selected.val () selected.text (): "";?
this.input = $ ( "<input>")
.appendTo (this.wrapper)
.VAL (valore)
.attr ( "titolo", "")
.addClass ( "custom-combobox-input ui-ui-widget di widget di contenuto ui-stato-default ui-angolo-sinistra")
.autocomplete ({
Ritardo: 0,
minLength: 0,
fonte: $ .proxy (questo, "sorgente_")
})
.tooltip ({
tooltipClass: "ui-stato-highlight"
});
this._on (this.input, {
autocompleteselect: function (evento, ui) {
ui.item.option.selected = true;
this._trigger ( "selezionare", evento, {
oggetto: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
Ingresso var = this.input,
wasOpen = false;
$ ( "<a>")
.attr ( "tabIndex", -1)
.attr ( "titolo", "Mostra tutti gli articoli")
.tooltip ()
.appendTo (this.wrapper)
apri un ({
Icone: {
primaria: "ui-icon-triangolo-1-s"
},
Testo: false
})
.removeClass ( "ui-angolo-all")
.addClass ( "custom-combobox-ginocchiera ui-angolo-destra")
.mousedown (function () {
wasOpen = input.autocomplete ( "widget") .IS ( ": visibile");
})
.Click (function () {
input.focus ();
// Se avete visto è chiuso se (wasOpen) {
tornare;
}
// Passa una stringa vuota come valore della ricerca, che mostra tutti i risultati input.autocomplete ( "cerca", "");
});
},
sorgente_: la funzione (richiesta, risposta) {
var Matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
risposta (this.element.children ( "opzione") .map (function () {
var text = $ (this) .text ();
if (this.value && (! request.term || matcher.test (testo)))
tornare {
Etichetta: il testo,
Valore: il testo,
Opzione: questo
};
}));
},
_removeIfInvalid: function (evento, ui) {
// Seleziona un elemento e non esegue altre azioni se (ui.item) {
tornare;
}
// Ricerca per una partita (case insensitive)
valore di var = this.input.val (),
valueLowerCase = value.toLowerCase (),
valido = false;
this.element.children ( "opzione") .Ogni (function () {
if ($ (this) .text (). toLowerCase () === valueLowerCase) {
this.selected = valido = true;
return false;
}
});
// Viene trovata una corrispondenza, nessun altra azione se (valido) {
tornare;
}
// Rimuovere il valore this.input valido
.VAL ( "")
.attr ( "titolo", valore + "non corrisponde ad alcun elemento")
.tooltip ( "Open");
this.element.val ( "");
this._delay (function () {
this.input.tooltip ( "close") .attr ( "titolo", "");
}, 2500);
this.input.data ( "ui-completamento automatico") .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 di">
<Label> vostro linguaggio di programmazione preferito: </ label>
<Select id = "Casella combinata">
<Option value = ""> Scegli ... </ option>
<Option value = "ActionScript"> ActionScript </ option>
<Option value = "AppleScript"> AppleScript </ option>
<Option value = "Asp"> Asp </ option>
<Option value = "BASIC"> BASE </ 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"> Rubino </ option>
<Option value = "Scala"> Scala </ option>
<Option value = "Schema"> Schema </ option>
</ Select>
</ Div>
<Button id = "Toggle"> casella di selezione basato Display </ button>
</ Corpo>
</ Html>
dati personalizzati e visualizzazione
È possibile utilizzare un formato di dati personalizzato, e mettendo a fuoco semplicemente ignorare il comportamento predefinito e selezionare per visualizzare i dati.
Provate a digitare "j", oppure premere il tasto freccia giù, è possibile ottenere un elenco di elementi.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - i dati personalizzati e visualizza </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
# Project-icona {
float: left;
Altezza: 32px;
width: 32px;
}
# Project-description {
margin: 0;
padding: 0;
}
</ Style>
<Script>
$ (Function () {
progetti var = [
{
valore: "jquery",
Etichetta: "jQuery",
desc: "la scrittura di meno, fare di più, libreria JavaScript",
Icona: "jquery_32x32.png"
},
{
valore: "jquery-ui",
Etichetta: "jQuery UI",
desc: "la libreria di interfaccia utente ufficiale per jQuery",
Icona: "jqueryui_32x32.png"
},
{
valore: "sizzlejs",
Etichetta: "Sizzle JS",
desc: "un motore di selettore di puro JavaScript CSS",
Icona: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
minLength: 0,
fonte: progetti,
messa a fuoco: la funzione (evento, ui) {
$ ( "#project") .VAL (Ui.item.label);
return false;
},
selezionare: la funzione (evento, ui) {
$ ( "#project") .VAL (Ui.item.label);
$ ( "# Project-id") .VAL (ui.item.value);
$ ( "# Project-description") .html (ui.item.desc);
$ ( "# Progetto-icona") .attr ( "src", "immagini /" + ui.item.icon);
return false;
}
})
.data ( "ui-completamento automatico") ._ renderItem = function (UL, voce) {
return $ ( "<li>")
.Append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo (ul);
};
});
</ Script>
</ Head>
<Body>
<Div id = "progetto-label"> Selezionare una voce (tipo "j"): </ div>
<Img id = "progetto-icona" src = "images / transparent_1x1.png" class = "ui-stato-default" alt = "">
<Input id = "progetto">
<Input type = "hidden" id = "progetto-id">
<P id = "progetto-description"> </ p>
</ Corpo>
</ Html>
valori multipli
Uso: Digitare alcuni caratteri, come "j", è possibile vedere i risultati di importanti linguaggi di programmazione. Selezionare un valore, e quindi digitare i caratteri continuano ad aggiungere ulteriore valore.
Questo esempio dimostra come utilizzare le opzioni di origine ed eventi per raggiungere il valore di un singolo campo di testo per inserire più automatica.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - valori multipli </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
funzione split (val) {
val.split tornare (/, \ s * /);
}
Funzione extractLast (termine) {
tornare split (termine) .pop ();
}
$ ( "#tags")
// Quando si seleziona un elemento senza lasciare il campo di testo .bind ( "keydown", la funzione (evento) {
if ($ event.keyCode === .ui.keyCode.TAB &&
$ (This) .data ( "ui-completamento automatico") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
minLength: 0,
fonte: la funzione (richiesta, risposta) {
// Completamento automatico posteriore, ma per estrarre l'ultima risposta di entrata ($ .ui.autocomplete.filter (
availableTags, extractLast (request.term)));
},
messa a fuoco: function () {
// Prevenire l'ottenimento di valori di inserimento di messa a fuoco return false;
},
selezionare: la funzione (evento, ui) {
termini var = split (this.value);
// Rimuovere il terms.pop ingresso di corrente ();
// Aggiungere il terms.push opzione selezionata (ui.item.value);
// Aggiungere un segnaposto, aggiungere una virgola alla fine del + Spazio terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "tag"> Linguaggi di programmazione: </ label>
<Input id = "tag" size = "50">
</ Div>
</ Corpo>
</ Html>
Valori multipli, a distanza
Uso: Inserisci i due personaggi, almeno per ottenere i nomi di uccelli. Selezionare un valore, e quindi digitare i caratteri continuano ad aggiungere ulteriore valore.
Questo esempio dimostra come utilizzare le opzioni di origine ed eventi per raggiungere il valore di un singolo campo di testo per inserire più automatica.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - valori multipli, a distanza </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico di carico {
sfondo: url bianco ( 'images / ui-anim_basic_16x16.gif') centro destra no-repeat;
}
</ Style>
<Script>
$ (Function () {
funzione split (val) {
val.split tornare (/, \ s * /);
}
Funzione extractLast (termine) {
tornare split (termine) .pop ();
}
$ ( "#birds")
// Quando si seleziona un elemento senza lasciare il campo di testo .bind ( "keydown", la funzione (evento) {
if ($ event.keyCode === .ui.keyCode.TAB &&
$ (This) .data ( "ui-completamento automatico") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
fonte: la funzione (richiesta, risposta) {
$ GetJSON ( "search.php", {
termine: extractLast (request.term)
}, Response);
},
Ricerca: function () {
// Minima personalizzato termine lunghezza var = extractLast (this.value);
if (term.length <2) {
return false;
}
},
messa a fuoco: function () {
// Prevenire l'ottenimento di valori di inserimento di messa a fuoco return false;
},
selezionare: la funzione (evento, ui) {
termini var = split (this.value);
// Rimuovere il terms.pop ingresso di corrente ();
// Aggiungere il terms.push opzione selezionata (ui.item.value);
// Aggiungere un segnaposto, aggiungere una virgola alla fine del + Spazio terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "uccelli"> uccello: </ label>
<Input id = "uccelli" size = "50">
</ Div>
</ Corpo>
</ Html>
fonte JSONP dati a distanza
Quando si digita caratteri in un campo di testo, componenti di completamento automatico danno risultati consulenza. In questo esempio, quando si digita almeno due caratteri in un campo di testo, verrà visualizzato il nome della città in questione.
In questo esempio, l'origine dati viene geonames.org WebService . Sebbene la scelta di un campo di testo dopo l'elemento è il nome della città, ma visualizza informazioni al fine di trovare la voce corretta. I dati possono anche essere una richiamata, i risultati vengono visualizzati nella casella qui sotto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - JSONP fonte dati remota </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico di carico {
sfondo: url bianco ( 'images / ui-anim_basic_16x16.gif') centro destra no-repeat;
}
#city {width: 25em;}
</ Style>
<Script>
$ (Function () {
log di funzione (messaggio) {
$ ( "<Div>") .text (messaggio) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
fonte: la funzione (richiesta, risposta) {
$ .ajax ({
url: "http://ws.geonames.org/searchJSON",
dataType: "JSONP",
Dati: {
featureClass: "P",
stile: "pieno",
maxRows: 12,
name_startsWith: request.term
},
successo: la funzione (dati) {
risposta ($ .map (data.geonames, la funzione (voce) {
tornare {
Etichetta: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
Valore: item.name
}
}));
}
});
},
minLength: 2,
selezionare: la funzione (evento, ui) {
log (ui.item?
"Selected:" + ui.item.label:
"Niente selezionato, ingresso era" + this.value);
},
aprire: function () {
$ (This) .removeClass ( "ui-angolo-all") .addClass ( "ui-angolo-top");
},
In prossimità: function () {
$ (This) .removeClass ( "ui-angolo-top") .addClass ( "ui-angolo-all");
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "città"> la tua città: </ label>
<Input id = "città">
Realizzato da <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
<Div class = "ui-widget di" style = "margin-top: 2em; font-family: Arial">
risultati:
<Div id = stile "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget di-content"> </ div>
</ Div>
</ Corpo>
</ Html>
L'origine dati remota
Quando si digita caratteri in un campo di testo, componenti di completamento automatico danno risultati consulenza. In questo esempio, quando si digita almeno due caratteri in un campo di testo, esso visualizzerà i nomi importanti di uccelli.
In questo esempio, l'origine dati viene restituito JSON script lato server dei dati per specificare una semplice opzioni di origine. Inoltre, l'opzione minLength è impostata su 2, per evitare la query restituisce troppi risultati, selezionare l'evento per visualizzare un feedback.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - fonte dati remota </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico di carico {
sfondo: url bianco ( 'images / ui-anim_basic_16x16.gif') centro destra no-repeat;
}
</ Style>
<Script>
$ (Function () {
log di funzione (messaggio) {
$ ( "<Div>") .text (messaggio) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
fonte: "search.php",
minLength: 2,
selezionare: la funzione (evento, ui) {
log (ui.item?
"Selected:" + ui.item.value + "alias" + ui.item.id:
"Niente selezionato, ingresso era" + this.value);
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "uccelli"> uccello: </ label>
<Input id = "uccelli">
</ Div>
<Div class = "ui-widget di" style = "margin-top: 2em; font-family: Arial">
risultati:
<Div id = stile "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget di-content"> </ div>
</ Div>
</ Corpo>
</ Html>
cache remota
Quando si digita caratteri in un campo di testo, componenti di completamento automatico danno risultati consulenza. In questo esempio, quando si digita almeno due caratteri in un campo di testo, esso visualizzerà i nomi importanti di uccelli.
Per migliorare le prestazioni, aggiungere qui un paio di cache locale, altri esempi di simili fonti di dati remoti. Qui, solo salvato una cache delle query, e la cache può essere esteso a più valori, ogni voce è un valore.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - Cache remoto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico di carico {
sfondo: url bianco ( 'images / ui-anim_basic_16x16.gif') centro destra no-repeat;
}
</ Style>
<Script>
$ (Function () {
cache di var = {};
$ ( "#birds") .autocomplete ({
minLength: 2,
fonte: la funzione (richiesta, risposta) {
termine var = request.term;
if (termine nella cache) {
risposta (cache [termine]);
tornare;
}
$ GetJSON ( "search.php", su richiesta, la funzione (dati, lo stato, XHR) {
cache [termine] = dati;
risposta (dati);
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "uccelli"> uccello: </ label>
<Input id = "uccelli">
</ Div>
</ Corpo>
</ Html>
risultato scorrevole
Quando si visualizza una lunga lista di opzioni, si può semplicemente impostare max-height per evitare menu di completamento automatico per visualizzare il menu troppo. Provate a digitare "A" o "s" per ottenere il risultato di un lungo elenco scorrevole.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - risultato scorrevole </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico {
max-height: 100px;
trabocco-y: auto;
/ * Evitare la barra di scorrimento orizzontale * /
di overflow-x: hidden;
}
/ * IE 6 non supporta la max-height
* Usiamo invece di altezza, ma questo costringerà il menu è sempre visualizzato come l'altezza * /
* Html .ui-completamento automatico {
altezza: 100px;
}
</ Style>
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
fonte: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "tag"> tag: </ label>
<Input id = "tag">
</ Div>
</ Corpo>
</ Html>
dati XML
Questo esempio mostra come ottenere alcuni dati XML e utilizza il metodo jQuery per risolverlo e fornirlo al completamento automatico come origine dati.
Questo esempio essere utilizzato anche come soluzione di un riferimento all'origine dati XML remoto - Analisi si verificano ad ogni richiesta di origine di richiamata.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI auto-completamento (Autocomplete) - dati XML </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-completamento automatico di carico {background: url bianco ( 'images / ui-anim_basic_16x16.gif') centro destra no-repeat;}
</ Style>
<Script>
$ (Function () {
log di funzione (messaggio) {
$ ( "<Div />") .text (messaggio) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
url: "london.xml",
dataType: "XML",
successo: la funzione (xmlResponse) {
var data = $ ( "geoname", xmlResponse) .map (function () {
tornare {
valore: $ ( "nome", questo) .text () + "," +
($ .trim ($ ( "CountryName", questo) .text ()) || "(sconosciuto paese)"),
id: $ ( "geonameId", questo) .text ()
};
.}) Get ();
$ ( "#birds") .autocomplete ({
fonte: dati,
minLength: 0,
selezionare: la funzione (evento, ui) {
log (ui.item?
"Selected:" + ui.item.value + ", geonameId:" + ui.item.id:
"Niente selezionato, ingresso era" + this.value);
}
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget di">
<Label for = "uccelli"> Londra Partita: </ label>
<Input id = "uccelli">
</ Div>
<Div class = "ui-widget di" style = "margin-top: 2em; font-family: Arial">
risultati:
<Div id = stile "log" = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget di-content"> </ div>
</ Div>
</ Corpo>
</ Html>