jQuery UI autocompletar, muestran algo cuando no hay resultados

Question

he el siguiente código:

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

    }; 

Actualmente sólo muestra el menú desplegable de autocompletar cuando hay resultados de búsqueda. Quiero que muestre "No se encontraron coincidencias" cuando no se pudo encontrar nada. ¿Qué debería agregar al código?

Gracias.

Answer 1

Si utiliza una llamada jQuery ajax para la fuente, puede agregar "No se encontraron resultados" a los resultados si no los hay. Luego, en el método de selección, simplemente puede verificar si el artículo es el elemento "sin resultados encontrados" que agregó y, de ser así, no hacer nada. Aquí identifiqué eso comprobando para ver si la identificación era igual a cero.

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

Tendrá que hacer algún trabajo en su plantilla para obtener el "no hay resultados" para mostrar correctamente, pero esto se debe conseguir en el camino correcto.

Answer 2

Puede verificar si el elemento es nulo o 0. Si el artículo es 0 o nulo, añada "No se encontraron coincidencias", sino que añada el artículo. Esa es básicamente toda la lógica.

Answer 3

Puede ser que esto ayuda

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