Cómo redirigir a otra página con el elemento de autocompletado de jQuery, haga clic en

Question

Estoy perplejo con este, he estado en ello horas, tratando de obtener jQuery autocompletar para ir a otra página en el sitio cuando se hace clic en un elemento en el lista de sugerencias.

¿Alguien sabe cómo hacer esto? Aquí está mi código:

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

Como se puede ver que he utilizado HTML personalizado en caso _renderItem, mi HTML personalizado crea una etiqueta de anclaje con el id pasado desde la fuente, esto se ve bien, se forma el enlace correctamente en la esquina inferior izquierda del navegador (estoy usando Chrome)

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

el problema es que cuando hago clic en el enlace no pasa nada, he intentado usar el evento select pero el artículo es nulo por lo que no puede conseguir item.PartyId forzar un salto manual.

¿Cómo puedo conseguir que funcione el clic?

Answer 1

Podría tarde para responder a ella, pero he hecho con el siguiente código:

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

Después de unos días de golpearse la cabeza (tipo no moshing) Yo he llegado con lo siguiente:

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

la cuestión fue (evento, elemento) debería haber sido (evento, ui) y para obtener el valor del elemento que utiliza ui.item.PartyId (en mi caso PartyId está declarado en la fuente: arriba)

Así que en mi forma original que tenía dos entradas html ID 1-oculto, 2-Enviar & como se puede ver en la función seleccionar: anterior configuro la ID & desencadenar el envío (por lo que ahora el usuario simplemente selecciona un elemento y se lo pasan al controlador que realiza el RedirectToView & NO este código, ya que no parece correcto usar la ubicación en este caso)

Espero que esto ahorre algo de tiempo ya que los documentos de autocompletado de jQuery no lo hacen demasiado claro.