2011-12-29 26 views
5

Vorrei che il completamento automatico di visualizzasse "nessun risultato" nell'elenco a discesa se non viene trovato alcun risultato.Completamento automatico Jquery - nessun messaggio risultato

La mia situazione è simile all'esempio predefinito di JQuery.

$(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({ 
     source: availableTags 
    }); 
}); 

Grazie per il vostro aiuto.

+0

possibile duplicato di [Rilevamento non ha prodotto risultati in jQuery UI autocomplete] (http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete) –

+0

In realtà, questo è leggermente diverso da quello che ho collegato come duplicato. Per favore, trascura il mio voto ravvicinato. –

risposta

10

Ecco un modo si potrebbe ottenere questo risultato:

$(function() { 
    var availableTags = [ /* snip */]; 
    var NoResultsLabel = "No Results"; 

    $("#tags").autocomplete({ 
     source: function(request, response) { 
      var results = $.ui.autocomplete.filter(availableTags, request.term); 

      if (!results.length) { 
       results = [NoResultsLabel]; 
      } 

      response(results); 
     }, 
     select: function (event, ui) { 
      if (ui.item.label === NoResultsLabel) { 
       event.preventDefault(); 
      } 
     }, 
     focus: function (event, ui) { 
      if (ui.item.label === NoResultsLabel) { 
       event.preventDefault(); 
      } 
     } 
    }); 
}); 

In sostanza, è necessario fornire un riferimento funzione del source al completamento automatico. All'interno di tale funzione, è possibile utilizzare la stessa funzione di utilità ($.ui.autocomplete.filter) per filtrare i risultati. Quindi puoi vedere se l'array dei risultati è vuoto. Se lo è, puoi aggiungere un messaggio predefinito all'elenco dei risultati.

Le altre due opzioni che ho specificato impediscono l'opzione No Risultati da essere selezionata o messa a fuoco.

Esempio:http://jsfiddle.net/er6LF/

+0

Perfetto! Grazie Andrew. Ora posso andare a casa. – m14Grl

+0

@ m14Grl: Felice di aiutare! –

0

Questo violino ha un lavoro è un esempio funzionale per cui si dispone: http://jsfiddle.net/andrewodri/wAg4g/

ho cambiato questo:

$("#tags").autocomplete({source: availableTags}); 

A tal:

$("#tags").autocomplete(availableTags); 

Puoi vedere che sta correndo g sull'ultima versione di jQuery e ha il plug-in collegato sotto "Gestisci risorse" preso da: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.

Update: Il codice precedente funziona se vi capita di essere utilizzando il plug-in si fa riferimento ... In caso contrario, sembra funzionare come è :) Si prega di notare che ho fatto aggiungere il codice all'interno $(document).ready();, che può avere stato impedendo se dal lavoro. Si prega di vedere questo violino biforcuto: http://jsfiddle.net/andrewodri/VLKwe/

Speranza che aiuta!

+0

BTW, documentazione aggiuntiva su questo plug-in è disponibile qui: http://docs.jquery.com/Plugins/Autocomplete –

+0

L'OP non sta utilizzando questo plug-in, sta utilizzando jQueryUI autocomplete (http: //www.jqueryui. com/demo/completamento automatico) –

+0

Ah, mio ​​male! Dai un'occhiata a questo violino forato quindi: http://jsfiddle.net/andrewodri/VLKwe/. Post updated :) –

Problemi correlati