jQuery affichage autocomplete message d'erreur "No data" lorsque les résultats sont vides

Question

J'utilise Jörn Zaefferer's jQueryAutocomplete plug-in. Fonctionne très bien avec les données. J'essaye de personnaliser la fonctionnalité en montrant un message d'erreur «aucun résultat» quand il n'y a aucun résultat retourné par la fonction OnChange (coup de clé). Je veux que le message soit affiché dans le même div que les résultats afficheraient. Ainsi quand vous entrez les lettres dans l'entrée, le div restera visible mais les résultats seront remplacés par un message. Rien d'extraordinaire dans le style, juste du texte brut.

Je peux faire apparaître le message, mais il ruine la fonction en la gardant là et en ne revenant pas à l'affichage des résultats (si vous supprimez certaines des lettres).

Exemple de fonctionnalité est la destination de qantas autocomplete www.qantas.com.au/travel/airlines/home/au/en

---

UPDATE

Dans le plug-in I ajouté la fonction

function NoResults() { 

     var wasVisible = select.visible(); 
     clearTimeout(timeout); 
     stopLoading(); 
     var resultText = $('.ac_results').html(); 
     var errorMessage = "There are no results that match your request. Please try again."; 
     //alert(resultText); 
     if (resultText.indexOf(errorMessage) == -1) { 
      $('.ac_results').append(errorMessage); 
     } 

}; 

Ensuite, dans la fonction de demande je l'ai changé

function request(term, success, failure) { 

     if (!options.matchCase) 
      term = term.toLowerCase(); 
     var data = cache.load(term); if (data && data.length) { success(term, data); } 
     else if ((typeof options.url == "string") && (options.url.length > 0)) { 
      var extraParams = { timestamp: +new Date() }; $.each(options.extraParams, function(key, param) { extraParams[key] = typeof param == "function" ? param() : param; }); 
      $.ajax({ mode: "abort", port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: $.extend({ q: lastWord(term), limit: options.max }, extraParams), 
       success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); } 
      }); 
     } 
     else { 
      select.emptyList(); 
      // failure(term); 
      NoResults(); 
     } 
}; 

Le seul problème qui me reste maintenant est qu'une fois que le message d'erreur s'affiche et que vous modifiez l'entrée pour qu'elle renvoie à nouveau les résultats, le message d'erreur est toujours en bas de la liste des résultats.

Answer 1

J'ai trouvé une solution à votre question. En utilisant l'option "parse", vous ne trouverez pas cette option sur son document, j'ai vérifié son code source trouvez cette option (vérifiez la ligne # 373).

Vous pouvez utiliser ce plug-in comme ceci:

$("#suggest4").autocomplete('http://jquery.bassistance.de/autocomplete/demo/search.php', { 
    width: 300, 
    multiple: true, 
    matchContains: true, 
    formatItem: formatItem, 
    formatResult: formatResult, 
    parse: function(data){ 
    var parsed = []; 
    var rows = data.split("\n"); 
    for (var i=0; i < rows.length; i++) { 
     var row = $.trim(rows[i]); 
     if (row) { 
     row = row.split("|"); 
     parsed[parsed.length] = { 
      data: row, 
      value: row[0], 
      result: formatResult(row, row[0]) || row[0] 
     }; 
     } 
    } 

    if (parsed.length == 0) { 
     row = ['no results', null]; 
     parsed[parsed.length] = { 
     data: row, 
     value: row[0], 
     result: formatResult(row, row[0]) || row[0] 
     }; 
    } 
    return parsed; 
    } 
}); 

Mais je pense que la meilleure solution est de modifier le plug-in Autocomplete et ajouter un événement comme "noresults". Vous pouvez suggérer à l'auteur d'ajouter cet événement :-)