Как перенаправить на другую страницу с помощью элемента автозаполнения jQuery, нажмите - PullRequest
Новая
       27

Как перенаправить на другую страницу с помощью элемента автозаполнения jQuery, нажмите

6 голосов
/ 13 марта 2012

Я озадачен этим, я часами пытался заставить автозаполнение jQuery перейти на другую страницу сайта при нажатии на элемент в списке предложений.

Кто-нибудь знает, как это сделать? Вот мой код: 

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

Как вы можете видеть, я использовал пользовательский HTML в событии _renderItem, мой пользовательский HTML создает тег привязки с идентификатором, переданным из источника, это выглядит нормально, ссылка сформирована правильно в левом нижнем углу браузера (Я использую Chrome) 

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

Проблема в том, что когда я нажимаю на ссылку, ничего не происходит, я пытался использовать событие select, но элемент имеет значение null, поэтому не могу получить item.PartyId, чтобы вызвать ручной переход.

Как мне заставить работать событие клика?

Ответы [ 2 ]

4 голосов
/ 18 марта 2012

Возможно, будет поздно ответить, но я сделал это с помощью следующего кода: 

$(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;
}
0 голосов
/ 06 апреля 2012

После нескольких дней головокружения (не типа «яростного») я придумал следующее: 

$(':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

Проблема заключалась в том, что (событие, элемент) должно было быть (событие, пользовательский интерфейс), и чтобы получить значение элемента, вы используете ui.item.PartyId (в моем случае PartyId объявлен в источнике: выше)

Итак, в моей исходной форме у меня было два html-ввода: 1-скрытый ID, 2-Submit и, как вы можете видеть в функции select: выше, я установил ID и активировал отправку (так что теперь пользователь просто выбирает элемент и выкл. они идут к контроллеру, который выполняет RedirectToView, а НЕ к этому коду, так как в этом случае использование местоположения некорректно)

Надеюсь, это сэкономит кому-то время, так как документы автозаполнения jQuery не слишком ясны.

...