Gérer aucuns résultats dans jquery autocomplete

Question

Hey j'essaye de renvoyer un message quand il n'y a aucun résultat pour la requête courante des utilisateurs! Je sais que je dois exploiter l'événement keyup, mais il semble que le plugin l'utilise

Answer 1

Vous pouvez essayer de fournir une option d'analyse (fonction pour gérer l'analyse des données) et faire ce dont vous avez besoin quand aucun résultat n'est retourné pour analyser .

Cet exemple suppose que vous récupérez un tableau d'objets JSON contenant des attributs FullName et Address.

$('#search').autocomplete({ 
     dataType: "json", 
     parse: function(data) { 
     var array = new Array(); 
     if (!data || data.length == 0) { 
      // handle no data case specially 
     } 
     else { 
      for (var i = 0; i < data.length; ++i) { 
       var datum = data[i]; 
       array[array.length] = { 
             data: datum, 
             value: data.FullName + ' ' + data.Address, 
             result: data.DisplayName 
            }; 
      } 
     } 
     return array; 
     } 
    }); 

Answer 2

Cette question est vraiment hors de ce jour, de toute façon, je travaille avec la nouvelle interface utilisateur jQuery 1.8.16, est maintenant assez autocomplete différent: http://jqueryui.com/demos/autocomplete/#default

Quoi qu'il en soit, si vous essayez de le faire la même chose que la question demande, il n'y a plus de fonction d'analyse, autant que je sache, il n'y a pas de fonction qui est appelée avec les résultats de la recherche.

La façon dont je réussi à retirer ceci est en remplaçant la fonction de filtre de la saisie semi-automatique - Note: cela affectera tous vos autocompletes

$.ui.autocomplete.filter = function(array, term) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 

      var aryMatches = $.grep(array, function(value) { 
       return matcher.test(value.label || value.value || value); 
      }); 

      if (aryMatches.length == 0){ 
       aryMatches.push({ 
        label: '<span class="info" style="font-style: italic;">no match found</span>', 
        value: null 
       });      
      } 

      return aryMatches; 
     }; 

La fonction est légèrement modifiée par rapport à la source, l'appel grep est le même , mais s'il n'y a aucun résultat j'ajoute un objet avec une valeur de null, alors je substitue les appels choisis pour vérifier une valeur nulle. Cela vous donne un effet où, si vous continuez à taper et qu'aucune correspondance n'est trouvée, vous obtenez l'élément 'no matches found' dans la liste déroulante, ce qui est plutôt cool.

Pour remplacer la sélection des appels voir jQuery UI Autocomplete disable Select & Close events

$(this).data('autocomplete').menu.options.selected = function(oEvent, ui){ 

      if ($(ui.item).data('item.autocomplete').value != null){ 
       //your code here - remember to call close on your autocomplete after 


      } 
     }; 

Depuis que je l'utiliser sur tous mes autocompletes sur une page, assurez-vous de vérifier si la valeur est nulle en premier! Avant d'essayer de référencer des clés qui ne sont pas là.

Answer 3

J'utilise le code suivant pour le même but (le message est affiché dans la liste de saisie semi-automatique):

success: function(data, status, xhr){      
    if(!data.length){ 
     var result = [ 
      { 
       label: 'There are no matches for your query: ' + response.term, 
       value: response.term 
      } 
     ]; 
     response(result); 
    } 
    else{ 
     // normal response 
    } 
} 

Answer 4

Vous pouvez également utiliser l'événement « réponse » d'examiner cela. Simple mais puissant. http://api.jqueryui.com/autocomplete/#event-response

response: function (event, ui) { 
      if (ui.content.length == 0) { 
       //Display an alert or something similar since there are no results 
      } 
     },