Thêm liên kết vào mục tự động hoàn thành JQueryUI

Question

Khi người dùng bắt đầu nhập trên hộp tìm kiếm, trang đề xuất trả về mục mới nhất từ ​​tất cả các bộ sưu tập khớp với tên đó, cộng với dữ liệu khác.

Tôi muốn hiển thị mục đó (cùng với hình ảnh của nó) và liên kết đến "xem tất cả các mục từ bộ sưu tập này".

tôi có thể làm (hầu hết) rằng với đoạn mã sau:

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: suggesturl, 
      dataType: 'json', 
      data: request, 
      success: function (data) { 
       response(data.map(function (value) { 
        return { 
         'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>', 
         'value': value.fullname 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 3 
}) 

Vấn đề là, mặc dù các liên kết xuất hiện trong hộp, khi được nhấp vào nó được bỏ qua, và hành động mặc định select là được thực hiện (mục value của mục được đưa vào hộp văn bản).

Answer 1

Có vẻ như bạn có một vài tùy chọn. Trước tiên, bạn có thể chỉ định hành động chọn của riêng bạn, sử dụng tùy chọn chọn trên bộ khởi tạo tự động hoàn thành.

$(selector).autocomplete({ 
    source: ... , 
    select: function(value, data){ 
      if (typeof data == "undefined") { 
       emitMessage('You selected: ' + value + "<br/>"); 
      } else { 
       emitMessage('You selected: ' + data.item.value + "<br/>"); 
      } 
    } 
}); 

Nếu điều đó không đủ, vì lý do nào đó, bạn có thể hiển thị nội dung của chính mình cho danh sách tự động hoàn chỉnh và theo cách đó, bạn có thể kiểm soát nhiều nhất.
Bạn làm điều đó bằng cách vá khỉ _renderItem fn, đó là những gì tự động hoàn thành cuộc gọi để hiển thị từng mục trong danh sách. Kiểm tra this answer để biết cách thực hiện. Nó hoạt động trong v1.8rc3.

Tôi giả sử trong _renderItem bạn có thể hiển thị <span> có thể nhấp và đính kèm bất kỳ logic nào bạn muốn cho sự kiện nhấp chuột.

Nếu bạn đi tuyến đường đó, bạn có thể cần phải TẮT hành động nhấp mặc định. Tôi nghĩ tự động hoàn thành sử dụng một số <a> cho phần tử cung cấp sự kiện nhấp chuột. Trong trường hợp đó, bạn sẽ cần bỏ đặt trình xử lý nhấp chuột đó.