jQuery UI autocomplete, hiển thị một cái gì đó khi không có kết quả

Question

Tôi đã đoạn mã sau:

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

    }; 

Hiện nay nó chỉ cho thấy sự sụt giảm xuống autocomplete khi có kết quả tìm kiếm. Tôi muốn nó hiển thị "Không tìm thấy kết quả phù hợp" khi không tìm thấy gì. Tôi nên thêm gì vào mã?

Cảm ơn.

Answer 1

Nếu bạn sử dụng cuộc gọi jQuery ajax cho nguồn, bạn có thể nối thêm "Không tìm thấy kết quả" vào kết quả nếu không có bất kỳ kết quả nào. Sau đó, trên phương thức chọn, bạn có thể chỉ cần kiểm tra xem mục đó có phải là mục "không tìm thấy kết quả" mà bạn đã thêm vào hay không và nếu không, sẽ không làm gì cả. Ở đây tôi xác định rằng bằng cách kiểm tra xem id có bằng không.

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

Bạn cần thực hiện một số thao tác trên mẫu của mình để không tìm thấy kết quả nào, nhưng điều này sẽ giúp bạn đi đúng hướng.

Answer 2

Bạn chỉ có thể kiểm tra xem mục có rỗng hay không.Nếu mục là 0 hoặc không nối thêm "Không tìm thấy kết quả phù hợp", hãy thêm mục vào. Đó là cơ bản toàn bộ logic.

Answer 3

Có thể điều này giúp

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