2012-03-12 4 views
6

Sono perplesso con questo, sono stato a lui ore, cercando di ottenere il completamento automatico jQuery per andare a un'altra pagina sul sito quando viene fatto clic su un elemento nel lista di suggerimenti.Come reindirizzare a un'altra pagina con jQuery Completamento automatico elemento click

Qualcuno sa come fare? Ecco il mio codice:

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

Come potete vedere ho usato HTML personalizzato in caso _renderItem, il mio HTML personalizzato di creare un tag di ancoraggio con l'id passato nel dall'origine, questo sembra ok, si forma il link correttamente nel browser nell'angolo in basso a sinistra (sto usando Chrome)

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

il problema è che quando si fa clic sul collegamento non accade nulla, ho provato ad utilizzare l'evento select ma voce è nullo e quindi non può ottenere item.PartyId forzare un salto manuale.

Come posso far funzionare l'evento click?

+4

perché non si utilizza 'location.href' – Rafay

+0

Quindi utilizzare window.location.href anziché window.location.replace. – j08691

+0

Ok, ho appena provato che, location.href non funziona, è quasi come il completamento automatico e lo interrompe non appena il messaggio di avviso non viene attivato. – LenPopLilly

risposta

4

Potrebbe tardi per rispondere, ma ho fatto questo con il seguente codice:

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

Dopo alcuni giorni di sbattere la testa (non moshing tipo) che è venuta in mente la seguente:

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

il tema è stato (eventi, voce) avrebbero dovuto essere (evento, ui) e per ottenere il valore della voce si utilizza ui.item.PartyId (nel mio caso PartyId è dichiarata nella fonte: sopra)

Così sul mio modulo originale Ho avuto due input HTML 1-hidden ID, 2-Submit & come si può vedere nella funzione select: sopra ho impostato l'ID & innescare l'invio (quindi ora l'utente seleziona un oggetto e lo fa andare al controller che esegue RedirectToView & NON questo codice in quanto non sembra corretto utilizzare la posizione in questa istanza)

Spero che questo salvi qualcuno un po 'di tempo in quanto i documenti di completamento automatico jQuery non lo rendono troppo chiaro.