2011-12-29 30 views
5

Me gustaría que la autocompleta a muestre "sin resultados" en su lista desplegable si no se encuentran resultados.Jquery Autocompletar - no hay mensaje de resultado

Mi situación es como el ejemplo predeterminado de 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 
    }); 
}); 

Gracias por su ayuda.

+0

posible duplicado de [Detección no hay resultados en jQuery UI autocompletar] (http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete) –

+0

En realidad, este es ligeramente diferente al que he vinculado como duplicado. Por favor haga caso omiso de mi voto cercano. –

Respuesta

10

Aquí hay una forma en que podría lograr esto:

$(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(); 
      } 
     } 
    }); 
}); 

Básicamente, es necesario proporcionar una referencia de función que el source a la función de autocompletar. Dentro de esa función, puede usar la misma función de utilidad ($.ui.autocomplete.filter) para filtrar los resultados. Luego puede ver si la matriz de resultados está vacía. Si es así, puede agregar un mensaje predeterminado a la lista de resultados.

Las otras dos opciones que he especificado impiden que se seleccione o enfoque la opción Sin resultados.

Ejemplo:http://jsfiddle.net/er6LF/

+0

Perfecto! Gracias Andrew. Ahora puedo irme a casa. – m14Grl

+0

@ m14Grl: ¡Me alegra ayudar! –

0

Este violín tiene un trabajo es un ejemplo funcional para que tenga: http://jsfiddle.net/andrewodri/wAg4g/

me cambió esto:

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

A esto:

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

Puedes ver que está corriendo g en la última versión de jQuery, y tiene el complemento vinculado en "Administrar recursos" tomado de: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.

Actualización: El código anterior funciona si le toca estar usando el plugin de referencia ... Si no, parece que funciona como es :) Tenga en cuenta que lo hice añadir el código dentro de $(document).ready();, que puede tener estado impidiendo si funciona. Por favor, vea este violín bifurcado: http://jsfiddle.net/andrewodri/VLKwe/

Espero que ayude!

+0

BTW, la documentación adicional sobre este complemento está disponible aquí: http://docs.jquery.com/Plugins/Autocomplete –

+0

El OP no está utilizando este complemento, está utilizando el autocompletado jQueryUI (http: //www.jqueryui. com/demos/autocomplete) –

+0

Ahh, mi mal! Mira este violín bifurcado: http://jsfiddle.net/andrewodri/VLKwe/. Mensaje actualizado :) –