JqueryUI - Completamento automatico

Il completamento automatico è un meccanismo utilizzato frequentemente nei siti Web moderni per fornire all'utente un elenco di suggerimenti per l'inizio della parola, che ha digitato in una casella di testo. L'utente può quindi selezionare un elemento dall'elenco, che verrà visualizzato nel campo di immissione. Questa funzione impedisce all'utente di dover inserire un'intera parola o un insieme di parole.

JQueryUI fornisce un widget di completamento automatico: un controllo che si comporta in modo molto simile a un menu a discesa <select>, ma filtra le scelte per presentare solo quelle che corrispondono a ciò che l'utente sta digitando in un controllo. jQueryUI fornisce l'estensioneautocomplete() per creare un elenco di suggerimenti sotto il campo di input e aggiunge nuove classi CSS agli elementi interessati per dare loro lo stile appropriato.

Qualsiasi campo che può ricevere input può essere convertito in un completamento automatico, ovvero elementi <input> , elementi <textarea> ed elementi con l' attributo contenteditable .

Sintassi

Il autocomplete() può essere utilizzato in due forme:

$ (selettore, contesto) .autocomplete (opzioni) Metodo

Il metodo di completamento automatico (opzioni) dichiara che un elemento <input> HTML deve essere gestito come un campo di input che verrà visualizzato sopra un elenco di suggerimenti. Il parametro options è un oggetto che specifica il comportamento dell'elenco di suggerimenti quando l'utente sta digitando nel campo di input.

Sintassi

$(selector, context).autocomplete (options);

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

$(selector, context).autocomplete({option1: value1, option2: value2..... });

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

Sr.No.	Opzione e descrizione
1	appendTo Questa opzione viene utilizzata per aggiungere un elemento al menu. Per impostazione predefinita, il suo valore ènull. Option - appendTo Questa opzione viene utilizzata per aggiungere un elemento al menu. Per impostazione predefinita, il suo valore ènull. Quando il valore è nullo, i genitori del campo di input verranno controllati per una classe di ui-front . Se viene trovato un elemento con la classe ui-front , il menu verrà aggiunto a quell'elemento. Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoFocus Questa opzione quando è impostata su true , la prima voce del menu sarà automaticamente focalizzata quando viene mostrato il menu. Per impostazione predefinita, il suo valore èfalse. Option - autoFocus Questa opzione quando è impostata su true , la prima voce del menu sarà automaticamente focalizzata quando viene mostrato il menu. Per impostazione predefinita, il suo valore èfalse. Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	ritardo Questa opzione è un numero intero che rappresenta il numero di millisecondi di attesa prima di provare a ottenere i valori corrispondenti (come specificato dall'opzione di origine ). Ciò può aiutare a ridurre il thrashing quando vengono ottenuti dati non locali, dando all'utente il tempo di inserire più caratteri prima che la ricerca venga avviata. Per impostazione predefinita, il suo valore è300. Option - delay Questa opzione è un numero intero che rappresenta il numero di millisecondi di attesa prima di provare a ottenere i valori corrispondenti (come specificato dall'opzione di origine ). Ciò può aiutare a ridurre il thrashing quando vengono ottenuti dati non locali, dando all'utente il tempo di inserire più caratteri prima che la ricerca venga avviata. Per impostazione predefinita, il suo valore è300. Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	Disabilitato Questa opzione, se specificata e vera , il widget di completamento automatico è inizialmente disabilitato. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione, se specificata e vera , il widget di completamento automatico è inizialmente disabilitato. Per impostazione predefinita, il suo valore èfalse. Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength Il numero di caratteri che deve essere inserito prima di tentare di ottenere i valori corrispondenti (come specificato dall'opzione di origine). Ciò può impedire la presentazione di un set di valori troppo grande quando pochi caratteri non sono sufficienti per ridurre il set a un livello ragionevole. Per impostazione predefinita, il suo valore è1. Option - minLength Il numero di caratteri che deve essere inserito prima di tentare di ottenere i valori corrispondenti (come specificato dall'opzione di origine). Ciò può impedire la presentazione di un set di valori troppo grande quando pochi caratteri non sono sufficienti per ridurre il set a un livello ragionevole. Per impostazione predefinita, il suo valore è1. Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	posizione Questa opzione identifica la posizione del menu dei suggerimenti rispetto all'elemento di input associato. L' opzione of ha come valore predefinito l'elemento di input, ma è possibile specificare un altro elemento rispetto al quale posizionarsi. Per impostazione predefinita, il suo valore è{ my: "left top", at: "left bottom", collision: "none" }. Option - position Questa opzione identifica la posizione del menu dei suggerimenti rispetto all'elemento di input associato. L' opzione of ha come valore predefinito l'elemento di input, ma è possibile specificare un altro elemento rispetto al quale posizionarsi. Per impostazione predefinita, il suo valore è{ my: "left top", at: "left bottom", collision: "none" }. Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	fonte Questa opzione specifica il modo in cui vengono ottenuti i dati che corrispondono ai dati di input. È necessario fornire un valore o il widget di completamento automatico non verrà creato. Per impostazione predefinita, il suo valore ènone; must be specified. Option - source Questa opzione specifica il modo in cui vengono ottenuti i dati che corrispondono ai dati di input. È necessario fornire un valore o il widget di completamento automatico non verrà creato. Questo valore può essere un: String che rappresenta l'URL di una risorsa del server che restituirà i dati corrispondenti, an array di dati locali da cui verrà fatto corrispondere il valore, o a function che funge da callback generale per fornire i valori corrispondenti. Syntax `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità del widget di completamento automatico.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità del widget di completamento automatico, senza passare parametri al file autocomplete() metodo.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Uso di autoFocus

Il seguente esempio dimostra l'utilizzo di option autoFocus nel widget di completamento automatico di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso di minLength e ritardo

L'esempio seguente mostra l'utilizzo di due opzioni minLength e delay nel widget di completamento automatico di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso dell'etichetta

Il seguente esempio dimostra l'utilizzo di option label nel widget di completamento automatico di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso di fonti esterne

Il seguente esempio dimostra l'utilizzo di file esterni per source opzione nel widget di completamento automatico di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

Il file search.php si trova nella stessa posizione del file sopra (autocompleteexample.html). I contenuti di search.php sono i seguenti:

<?
$term = $_GET[ "term" ];
$companies = array( array( "label" => "JAVA", "value" => "1" ), array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ), array( "label" => "JAVASCRIPT", "value" => "3" ), array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ), array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ), array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ), array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ), array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ), array( "label" => "CLOUD COMPUTING", "value" => "9" ), array( "label" => "DATA MINING", "value" => "10" ), array( "label" => "DATA WAREHOUSE", "value" => "11" ), array( "label" => "E-COMMERCE", "value" => "12" ), array( "label" => "DBMS", "value" => "13" ), array( "label" => "HTTP", "value" => "14" ) ); $result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Digita due lettere per ad esempio: ja, sc ecc

$ (selector, context) .autocomplete ("action", params)

Il metodo di completamento automatico ("action", params) può eseguire un'azione nell'elenco di suggerimenti, come mostra o nascondi. L'azione è specificata come una stringa nel primo argomento (ad esempio, "chiudi" per nascondere l'elenco). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

$(selector, context).autocomplete ("action", params);;

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

Sr.No.	Azione e descrizione
1	vicino Questa azione nasconde l'elenco dei suggerimenti nel menu Completamento automatico. Questo metodo non accetta argomenti. Action - close Questa azione nasconde l'elenco dei suggerimenti nel menu Completamento automatico. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).autocomplete("close");`
2	distruggere Questa azione rimuove la funzionalità di completamento automatico. Gli elenchi di suggerimenti vengono eliminati. Questo metodo non accetta argomenti. Action - destroy Questa azione rimuove la funzionalità di completamento automatico. Gli elenchi di suggerimenti vengono eliminati. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).autocomplete("destroy");`
3	disattivare Questa azione disabilita il meccanismo di completamento automatico. L'elenco dei suggerimenti non viene più visualizzato. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita il meccanismo di completamento automatico. L'elenco dei suggerimenti non viene più visualizzato. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).autocomplete("disable");`
4	abilitare Questa azione riattiva il meccanismo di completamento automatico. Verrà nuovamente visualizzato l'elenco dei suggerimenti. Questo metodo non accetta argomenti. Action - enable Questa azione riattiva il meccanismo di completamento automatico. Verrà nuovamente visualizzato l'elenco dei suggerimenti. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).autocomplete("enable");`
5	opzione (optionName) Questa azione recupera il valore del parametro optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con il completamento automatico (opzioni). Action - option( optionName ) Questa azione recupera il valore del parametro optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con il completamento automatico (opzioni). Syntax `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	opzione Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di completamento automatico corrente. Action - option Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di completamento automatico corrente. Syntax `var options = $( ".selector" ).autocomplete( "option" );`
7	opzione (optionName, value) Questa azione imposta il valore dell'opzione di completamento automatico associata a optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Action - option( optionName, value ) Questa azione imposta il valore dell'opzione di completamento automatico associata a optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Syntax `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	opzione (opzioni) Questa azione imposta una o più opzioni per il completamento automatico. L'argomento opzioni è una mappa di coppie opzione-valore da impostare. Action - option( options ) Questa azione imposta una o più opzioni per il completamento automatico. L'argomento opzioni è una mappa di coppie opzione-valore da impostare. Syntax `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	cerca ([valore]) Questa azione cerca la corrispondenza tra il valore della stringa e l'origine dati (specificata in options.source ). Il numero minimo di caratteri (indicato in options.minLength ) deve essere raggiunto in valore, altrimenti la ricerca non viene eseguita. Action - search( [value ] ) Questa azione cerca la corrispondenza tra il valore della stringa e l'origine dati (specificata in options.source ). Il numero minimo di caratteri (indicato in options.minLength ) deve essere raggiunto in valore, altrimenti la ricerca non viene eseguita. Syntax `$( ".selector" ).autocomplete( "search", "" );`
10	aggeggio Recupera l'elemento DOM <ul> corrispondente all'elenco di suggerimenti. Questo è un oggetto della classe jQuery che consente un facile accesso all'elenco senza utilizzare i selettori jQuery. Action - widget Recupera l'elemento DOM <ul> corrispondente all'elenco di suggerimenti. Questo è un oggetto della classe jQuery che consente un facile accesso all'elenco senza utilizzare i selettori jQuery. Syntax `$( ".selector" ).autocomplete("widget");`

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso del metodo option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Punti di estensione

Il widget di completamento automatico può essere esteso poiché è stato creato con la fabbrica di widget. Quando si estendono i widget, è possibile sovrascrivere o aggiungere elementi al comportamento dei metodi esistenti. La tabella seguente elenca i metodi che agiscono come punti di estensione con la stessa stabilità API dei metodi del plug-in sopra elencati .

Sr.No.	Metodo e descrizione
1	_renderItem (ul, articolo) Questo metodo controlla la creazione di ciascuna opzione nel menu del widget. Questo metodo crea un nuovo elemento <li>, lo aggiunge al menu e lo restituisce. _renderItem( ul, item ) Questo metodo controlla la creazione di ciascuna opzione nel menu del widget. Questo metodo crea un nuovo elemento <li>, lo aggiunge al menu e lo restituisce. Dove - <ul> è l'elemento che deve essere aggiunto all'elemento <li> appena creato. item può essere un'etichetta (String) , la stringa da visualizzare per l'elemento o un valore (String) , il valore da inserire nell'input quando l'elemento è selezionato.
2	_renderMenu (ul, elementi) Questo metodo controlla la creazione del menu del widget. _renderMenu( ul, items ) Questo metodo controlla la creazione del menu del widget. Dove - <ul>è un array di elementi che corrispondono al termine digitato dall'utente. Ogni elemento è un oggetto con proprietà di etichetta e valore .
3	_resizeMenu () Questo metodo controlla il dimensionamento del menu prima che venga visualizzato. L'elemento menu è disponibile in this.menu.element . Questo metodo non accetta argomenti. _resizeMenu() Questo metodo controlla il dimensionamento del menu prima che venga visualizzato. L'elemento menu è disponibile in this.menu.element . Questo metodo non accetta argomenti.

Gestione degli eventi su elementi di completamento automatico

Oltre al metodo di completamento automatico (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di evento sono elencati di seguito:


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

Sr.No.	Metodo e descrizione dell'evento
1	cambiamento (evento, ui) Questo evento viene attivato quando il valore dell'elemento <input> viene modificato in base a una selezione. Quando viene attivato, questo evento verrà sempre dopo l' attivazione dell'evento di chiusura . Event - change(event, ui) Questo evento viene attivato quando il valore dell'elemento <input> viene modificato in base a una selezione. Quando viene attivato, questo evento verrà sempre dopo l' attivazione dell'evento di chiusura . Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - item- La voce selezionata dal menu, se presente. Altrimenti la proprietà è nulla. Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	close (evento, ui) Questo evento viene attivato ogni volta che si chiude il menu di completamento automatico. Event - close(event, ui) Questo evento viene attivato ogni volta che si chiude il menu di completamento automatico. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	create (evento, ui) Questo evento viene attivato quando viene creato il completamento automatico. Event - create(event, ui) Questo evento viene attivato quando viene creato il completamento automatico. Dove l' evento è di tipo Evento e ui è di tipo Oggetto . I possibili valori di ui sono - item- La voce selezionata dal menu, se presente. Altrimenti la proprietà è nulla. Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus (evento, ui) Questo evento viene attivato ogni volta che una delle scelte di menu viene attivata. A meno che non venga annullato (ad esempio, restituendo false), il valore selezionato viene impostato nell'elemento <input>. Event - focus(event, ui) Questo evento viene attivato ogni volta che una delle scelte di menu viene attivata. A meno che non venga annullato (ad esempio, restituendo false), il valore selezionato viene impostato nell'elemento <input>. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - item - L'oggetto focalizzato. Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	open (evento, ui) Questo evento viene attivato dopo che i dati sono stati preparati e il menu sta per aprirsi. Event - open(event, ui) Questo evento viene attivato dopo che i dati sono stati preparati e il menu sta per aprirsi. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	risposta (evento, ui) Questo evento viene attivato al termine di una ricerca, prima che venga visualizzato il menu. Questo evento viene sempre attivato al termine di una ricerca, anche se il menu non verrà mostrato perché non ci sono risultati o il completamento automatico è disabilitato. Event - response(event, ui) Questo evento viene attivato al termine di una ricerca, prima che venga visualizzato il menu. Questo evento viene sempre attivato al termine di una ricerca, anche se il menu non verrà mostrato perché non ci sono risultati o il completamento automatico è disabilitato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - content - Contiene i dati di risposta e può essere modificato per cambiare i risultati che verranno visualizzati. Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	ricerca (evento, ui) Questo evento viene attivato dopo che qualsiasi ritardo e i criteri minLength sono stati soddisfatti, appena prima che venga attivato il meccanismo specificato dalla sorgente. Se viene annullata, l'operazione di ricerca viene interrotta. Event - search(event, ui) Questo evento viene attivato dopo che qualsiasi ritardo e i criteri minLength sono stati soddisfatti, appena prima che venga attivato il meccanismo specificato dalla sorgente. Se viene annullata, l'operazione di ricerca viene interrotta. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	seleziona (evento, ui) Questo evento viene attivato quando viene selezionato un valore dal menu di completamento automatico. L'annullamento di questo evento impedisce che il valore venga impostato nell'elemento <input> (ma non impedisce la chiusura del menu). Event - select(event, ui) Questo evento viene attivato quando viene selezionato un valore dal menu di completamento automatico. L'annullamento di questo evento impedisce che il valore venga impostato nell'elemento <input> (ma non impedisce la chiusura del menu). Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - item - Un oggetto con proprietà di etichetta e valore per l'opzione selezionata. Syntax `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Esempio

L'esempio seguente mostra l'utilizzo del metodo degli eventi nei widget a completamento automatico. Questo esempio dimostra l'utilizzo di eventi di messa a fuoco , e selezionare .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).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>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

Salviamo il codice sopra in un file HTML autocompleteexample.htme aprilo in un browser standard che supporta javascript. È inoltre necessario visualizzare il seguente output:

↰ Previous page Next page ↱

JqueryUI - Completamento automatico

Sintassi

$ (selettore, contesto) .autocomplete (opzioni) Metodo

Sintassi

Funzionalità predefinita

Uso di autoFocus

Uso di minLength e ritardo

Uso dell'etichetta

Uso di fonti esterne

$ (selector, context) .autocomplete ("action", params)

Sintassi

Esempio

Punti di estensione

Gestione degli eventi su elementi di completamento automatico

Esempio

Effetti JqueryUI

Interazioni JqueryUI

Tutorial JqueryUI

Risorse utili di JqueryUI

Utilità JqueryUI

Widget JqueryUI