autocomplete jQuery UI, montrer quelque chose quand aucun résultat

Question

Je le code suivant:

// Autocomplete search 
    $("#shop_search").autocomplete({ 
     source: '<%= spotify_search_path(:json) %>', 
     minLength: 1, 
     select: function(event, ui) { 
     append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web); 
     $("#shop_search").val(''); 
     } 
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + "<span class='autocomplete_link'>" + item.name + "</span>" + "<br />" + "<span class='autocomplete_address'>" + item.address_geo + "</span>" + "</a>") 
     .appendTo(ul); 

     $(".ui-autocomplete-loading").ajaxStart(function(){ 
     $(this).show(); 
     }); 

     $(".ui-autocomplete-loading").ajaxStop(function(){ 
     $(this).hide(); 
     }); 

    }; 

Actuellement, il montre que le menu déroulant autocomplete quand il est le résultat de la recherche. Je veux qu'il montre "Aucune correspondance trouvée" quand rien n'a pu être trouvé. Que devrais-je ajouter dans le code?

Merci.

Answer 1

Si vous utilisez un appel ajax jQuery pour la source, vous pouvez ajouter "Aucun résultat trouvé" aux résultats s'il n'y en a pas. Ensuite, sur la méthode select, vous pouvez simplement vérifier si l'élément est l'élément "no results found" que vous avez ajouté et si c'est le cas, ne rien faire. Ici, j'ai identifié cela en vérifiant si l'identifiant était égal à zéro.

$("#shop_search").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "<%= spotify_search_path(:json) %>", 
      data: { 
       term: request.term 
      }, 
      success: function (data) { 
       if (data.length == 0) { 
        data.push({ 
         id: 0, 
         label: "No results found" 
        }); 
       } 
       response(data); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     if (ui.item.id != 0) { 
      append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web); 
      $("#shop_search").val(''); 
     } 
    } 
}); 

Vous aurez besoin de faire un travail sur votre modèle pour obtenir les « aucun résultat trouvé » pour afficher correctement, mais cela devrait vous mettre sur la bonne voie.

Answer 2

Vous pouvez simplement vérifier si l'élément est nul ou 0. Si l'élément est 0 ou null, ajoutez "Aucune correspondance trouvée" sinon ajoutez l'élément. C'est essentiellement toute la logique.

Answer 3

Peut être que cela aide

source: function(request, response) { 
    $.getJSON(url, { 
     term: extractLast(request.term) 
    }, response) 
    .error(function() { 
     console.log("no results"); 
    }); 
}, 

Answer 4

$("#jsonNameSearch").autocomplete({ 
    // This is the source of the autocomplete, in the success method if the 
    // length of the response is zero then highlight the field indicating no match. 
    source: function(request, response) { 
     $.getJSON('jsonAutocomplete.ajax?dataType=drivers', { 
      term: request.term 
     }, response) 
     .success(function(data) { 
      (data.length == 0) ? $("#jsonNameSearch").addClass('nomatch') : $("#jsonNameSearch").removeClass('nomatch'); 
     }); 
    },  
    select: function(event, ui) {   
     if (ui.item) self.location.replace('driverModify.htm?id='+ui.item.id);   
    }   
});