jQuery UI otomatik tamamlama, gösteri şey ben şu kod var

Question

sonuç: Arama sonucu olduğunda

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

    }; 

Şu anda sadece otomatik tamamlama açılır gösterir. Hiçbir şey bulunamadığında "Eşleşme bulunamadı" ifadesini göstermesini istiyorum. Kodu ne eklemeliyim?

Teşekkürler.

Answer 1

Eğer kaynak için bir jQuery ajax arama kullanırsanız herhangi bulunmuyorsa, sen sonuçlarına "Sonuç bulunamadı" ekleyebilirsiniz. Ardından, seçme yönteminde, öğenin eklediğiniz "sonuç bulunamadı" öğesinin olup olmadığını ve varsa, hiçbir şey yapmadığını kontrol edebilirsiniz. Burada, kimliğin sıfıra eşit olup olmadığını kontrol ederek tespit ettim.

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

düzgün görüntülemek için "sonuç bulunamadı" sonucunun elde etmek Şablonunuzdaki bazı işler yapmak gerekir, ancak bu doğru yolda gitmemiz lazım.

Answer 2

Yalnızca öğenin sıfır veya 0 olup olmadığını kontrol edebilirsiniz. Öğe 0 veya sıfır "Ek eşleşme bulunamadı" seçeneğini eklerse, öğeyi ekleyin. Bu temelde tüm mantık.

Answer 3

bu Yayınladığınız kod açıkladı verirsen, daha iyi olurdu

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