Question

I have just built a custom autocomplete component using jquery. My problem is that when somebody uses the keyboard up/down arrow key to select one of the autocomplete suggestion and hits return, form submission happens even though I call event.stopPropogation() and event.preventDefault() and also return false.

I have bound the core function to the keyup event:

$('#'+id).keyup(function(event){ getResults(event,this,url,method,data,setEl,makeLink,cssClass); event.preventDefault(); event.stopPropagation(); return false;});

getResults makes an ajax call to a server script that returns json object.
getResults pseudocode is as follows:

function getResults(event,element,url,method,data,setEl,makeLink,cssClass) {
    $(element).css("position","inherit");
var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode == 40){ //down arrow key
    if ($("#ac_"+element.id+" .hover").is("li")) { // some li is already on hover!
        if ($("#ac_"+element.id+" .hover").is($("#ac_"+element.id+" li").last())) {
            $("#ac_"+element.id+" .hover").removeClass("hover");
            $("#ac_"+element.id+" li").first().addClass("hover");
        } else {
            $("#ac_"+element.id+" .hover").removeClass("hover").next().addClass("hover");
        }
    } else {
        $("#ac_"+element.id+" li").first().addClass("hover");
    }
    event.stopPropagation();
    event.preventDefault();
    return false;
} else if (keyCode == 38){ //up arrow key
    if ($("#ac_"+element.id+" .hover").is("li")) { // some li is already on hover!
        if ($("#ac_"+element.id+" .hover").is($("#ac_"+element.id+" li").first())) {
            $("#ac_"+element.id+" .hover").removeClass("hover");
            $("#ac_"+element.id+" li").last().addClass("hover");
        } else {
            $("#ac_"+element.id+" .hover").removeClass("hover").prev().addClass("hover");
        }
    } else {
        $("#ac_"+element.id+" li").last().addClass("hover");
    }
    event.stopPropagation();
    event.preventDefault();
    return false;
} else if (keyCode == 13){ //return key
    if ($("#ac_"+element.id+" .hover").is("li")) { // some li is already on hover!
        $("#ac_"+element.id+" .hover").removeClass("hover").trigger("click");
        
    }
    event.stopPropagation();
    event.preventDefault();
    return false;
}

if (setEl) { if (!$(element).val() || $(element).val()=="") { $("#"+setEl).val('');} }
if ($(element).val() != autocomplete_prev_search[element.id]) {
    $("#ac_"+element.id).remove();
}
autocomplete_prev_search[element.id] = $(element).val();
if ($(element).val().length>=3) {
    if (!url){return;}
    if (!data) {
        data = {match:$(element).val()};
    } else {
        data.match = $(element).val();
    }
    if (!method) { method = "POST"; }
    $.ajax({
        type: method,
        url: url,
        data: data,
        success: function(result){ return resultHandler(result,element.id,setEl,makeLink,event); },
        beforeSend: function(){ $(element).css("background-image","url('/kit/icons/indeterminate.gif')").css("background-repeat","no-repeat").css("background-position","right center"); },
        complete:function(){ $(element).css("background-image","none"); },
        error: errorHandler,
        timeout: 1000,
        dataType: "json"
    });
}
    return false;
}

Finally the success handler of the ajax call is as follows:

function resultHandler(result, id, setEl, makeLink, event) {
    $("#ac_"+id).remove();
if (result && result.length>0) {
    var $ul = $("<ul id='ac_"+id+"' class='autocomplete'></ul>");
    var $li;
    for (var i=0; i<result.length; i++) {
        if (result[i]) {
            if (makeLink) {
                $li = $("<li onclick=\"location.href='/"+result[i].type+"/"+result[i].id+"'\">"+result[i].type+" '"+result[i].title+"'</li>");
            } else {
                if (!setEl) {
                    $li = $("<li onclick=\"$('#"+id+"').val('"+result[i].id+"'); return killEvent(event);\">"+result[i].type+" '"+result[i].title+"'</li>");
                } else {
                    $li = $("<li onclick=\"$('#"+setEl+"').val('"+result[i].id+"'); $('#"+id+"').val('"+result[i].title+"');return killEvent(event);\">"+result[i].type+" '"+result[i].title+"'</li>");
                }
            }
            //$li.click(function(){ location.href="/"+result[i].type+"/"+result[i].id; });
            // doesn't work as the click function has no access to result[i] object
            $ul.append($li);
        }
    }
    var left = $('#'+id).offset().left;
    var top = $('#'+id).offset().top+$('#'+id).outerHeight();
    $ul.css("width",$("#"+id).css("width")).css("left",left+"px").css("top",top+"px");
    $ul.insertAfter('#'+id);
}
    return false;
}

And lastly, killEvent is a simple function :

function killEvent(event) {
    var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode == 13) {
    event.stopPropogation();
    event.preventDefault();
    return false;
    }
}

So, all the handlers and even the click on the li element of the autocomplete suggestion list are all returning false and calling stopPropogation and preventDefault. However, the form submission still occurs! What am i doing wrong or missing here. Sorry for the long post!

Answer 1

Well I found a way in which to stop the default event of the browser when return key is pressed while doing a selection of the autocomplete suggestion using keyboard’s up/down key and enter!

$('#'+id).keydown(function(event){ return handleKey(event); });
$('#'+id).keyup(function(event){ return getResults(event,this,url,method,data,setEl,makeLink,cssClass); });

Where on keydown, the handleKey function simply checks for keycode 13 and then calls stopPropagation and preventDefault!

Here’s the handleKey function

function handleKey(event) {
    var keyCode = event.keyCode ? event.keyCode : event.which;
    if (keyCode == 13) {
        event.preventDefault();
        event.stopPropagation();
        return false;
    } else {
        return true;
    }
}

Thus I cancel the default action of the browser on keydown!
On keyup, the getResults simply checks and returns if there is a selection!

The trick is that to stop the default action of the browser, we have to act on keydown and not on keyup!

Thanks all especially CronosS for pointing this out!