Cách chuyển hướng đến một trang khác với mục jQuery Autocomplete, hãy nhấp vào

Question

Tôi đã gặp vấn đề này, tôi đã cố gắng tự động hoàn thành jQuery để truy cập trang khác trên trang web khi một mục được nhấp vào danh sách đề xuất.

Bất kỳ ai biết cách thực hiện việc này? Đây là mã của tôi:

$(':input[data-autocomplete]').autocomplete({ 
    source: $(':input[data-autocomplete]').attr("data-autocomplete"), 
    delay: 0, 
    select: function (event, item) { 
     //window.location.replace("http://www.example.com/Profile/Details/1");// Works but totally unacceptable, browser history lost etc.. 
     //alert("Item Clicked"); //Fires Ok 
    } 
}).data("autocomplete")._renderItem = function (ul, item) { 
    var MyHtml = '<a id="ItemUrl" href="/Profile/Details/' + item.PartyId + '"' + ">" + 
        "<div class='ac' >" + 
        "<div class='ac_img_wrap' >" + 
        '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' + 
        "</div>" + 
        "<div class='ac_mid' >" + 
        "<div class='ac_name' >" + item.value + "</div>" + 
        "<div class='ac_info' >" + item.info + " PartyId :" + item.PartyId + "</div>" + 
        "</div>" + 
        "</div>" + 
        "</a>"; 
    return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul); 
}; 

Như bạn có thể thấy tôi đã sử dụng HTML tùy chỉnh trong trường hợp _renderItem, HTML tùy chỉnh của tôi tạo ra một thẻ neo với id thông qua vào từ nguồn, điều này có vẻ ok, liên kết được hình thành một cách chính xác ở góc dưới bên trái trình duyệt (tôi đang sử dụng Chrome)

<a href='/Profile/Details/id' >some other divs & stuff</a> 

vấn đề là khi tôi nhấp vào liên kết có gì xảy ra, tôi đã cố gắng sử dụng các sự kiện chọn nhưng item là null do đó không thể có được item.PartyId để buộc một bước nhảy thủ công.

Tôi làm cách nào để sự kiện nhấp hoạt động?

Answer 1

Nó có thể muộn để trả lời nó, nhưng tôi đã làm điều này với đoạn mã sau:

$(document).ready(function() { 
    $('#txtSearch').autocomplete({ 
     minLength: 3, 
     source: "handlers/SearchAutoComplete.ashx?loc=" + $('#hfLocation').val(), 
     select: function(event, ui) { 
      doSearch(ui.item.label, ui.item.city); 
     } 
    }); 
}); 

function doSearch(term, location) { 
    window.location.href = 'Search.aspx?q=' + term + '&loc=' + location; 
} 

Answer 2

Sau một vài ngày đầu đập (không moshing loại) Tôi đã đưa ra như sau:

$(':input[data-autocomplete]').autocomplete({ 
    source: $(':input[data-autocomplete]').attr("data-autocomplete"), 
    delay: 0, 
    select: function (event, ui) { 
     var q = ui.item.PartyId; 
     if (q != "") { 
      $('#hidPID').val(q); 
      $('#ac_submit').trigger('click'); 
     } 
    }).data("autocomplete")._renderItem // -->>> the rest of the code same as above 

vấn đề này đã được (sự kiện, mục) nên có được (sự kiện, ui) và để có được giá trị của mặt hàng đó bạn sử dụng ui.item.PartyId (trong trường hợp của tôi PartyId được khai báo trong các nguồn: ở trên)

Vì vậy, trên hình thức ban đầu tôi đã có hai đầu vào html 1-ẩn ID, 2-Gửi & như bạn có thể thấy trong chọn: chức năng ở trên tôi đặt ID & kích hoạt gửi (vì vậy bây giờ người dùng chỉ cần chọn một mục và tắt họ đi đến bộ điều khiển mà thực hiện RedirectToView & kHÔNG mã này vì nó dường như không đúng để sử dụng vị trí trong trường hợp này)

tôi Hy vọng điều này giúp tiết kiệm một ai đó một thời gian như các tài liệu autocomplete jQuery không làm cho nó quá rõ ràng.