Tìm kiếm khi nhấp vào với tính năng Tự động hoàn tất của Jquery

Question

Tôi đang cố gắng mô phỏng trải nghiệm Tìm kiếm tự động hoàn thành của Youtube.

Tôi không thể tìm thấy tùy chọn khi người xem nhấp vào một mục được liệt kê và tự động được tiến hành để tìm kiếm mục đã nói.

mã của tôi là như sau:

<script type="text/javascript"> 
    var data = ['array1','array2']; 
    $(document).ready(function() { 
    $j("input#directorySearch").autocomplete(data); 
    }); 
</script> 

Đoạn mã trên sẽ cho phép người dùng click vào các mục niêm yết, tuy nhiên, nó sẽ điền vào hộp tìm kiếm chứ không phải tự động tìm kiếm.

Answer 1

Tôi muốn có hành vi tương tự, sử dụng tiện ích tự động hoàn thành mặc định của jQueryui. Bí quyết là sử dụng sự kiện 'chọn', nhưng việc gửi từ trình xử lý chọn lọc của bạn sẽ không cung cấp kết quả mong muốn, bởi vì đầu vào sẽ chưa có lựa chọn được điền.

Mã sau đây hoạt động cho tôi mặc dù:

$("input#searchbox").autocomplete({ 
    source: autocomplete, 
    select: function(event, ui) { 
    $("input#searchbox").val(ui.item.value); 
    $("#searchform").submit(); 
    } 
}) 

(trong ví dụ trên, 'autocomplete' là một url trỏ đến nguồn hoàn thành)

đâu đầu vào # hộp tìm kiếm là entry đầu vào thực tế, và #searchform là hình thức mẹ. Về cơ bản, bạn cần điền thông tin vào trước khi tự mình gửi.

Answer 2

có thể bạn không chỉ cần làm điều gì đó như:

$('.autocomplete ul li').live("click", function() { 
    $("form#search").submit(); 
}); 

Trong trường hợp sự kiện click trong danh sách lựa chọn của bạn gây nên một hình thức nộp cho các hình thức tìm kiếm của bạn ??

Answer 3

Ban đầu, tôi đã sử dụng một cái gì đó đơn giản như Bassistance.de

tôi chuyển sang sử dụng thư viện khác bằng cách devBridge

devBridge có một tùy chọn gọi là "onSelect:" cho phép tôi để tự động gửi biểu mẫu.

Answer 4

$j("input#directorySearch").result(function(event, data, formatted) { 
    $(this).closest("form").submit(); 
}); 

tài liệu chính thức: http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 5

$(function() { 
$("#search").autocomplete(
    { 
     source:'/search-terms.php', 
     focus: function(event, ui) { 
      $("input#search").val(ui.item.label); 
     }, 
     select: function(event, ui) { 

      $("#searchform button").click(); } 
    }) 
}); 

Tôi đang sử dụng này làm việc tốt :)