Not able to type inside textbox with json request.

Question

I have created a custom Autocomplete textbox without using pulgin but when i type search data and request is send through httpHandler to get the required data i am not able to type in textbox till the time server request is not complete after that i am able to type ,now for testing team this is a bug , pls suggest me a workaround for this problem.

Thanks .


My Code:

$(function(){

try {

    $('#txtSearchItem').keydown(function (e) {

        if (e.keyCode != 40 && e.keyCode != 38) {

            var SearchItem = $(this).val();

            if (SearchItem.trim() != null && SearchItem.trim() != "") {

                //Call the Search handler for getting data

                CallAjax(SearchItem);

            }else{

                $('#searchitemdetail').hide();

                $('#searchItmHtml').html('');

            }

        }

    });

} catch (err) {

    alert(err);

}

function CallAjax(SearchItem) {

    $.ajax({

        type: "POST",

        url: ResolveUrl("~/SearchHandler.ashx"),

        data: { 'strSearchtext': SearchItem },

        dataType: "json",

        success: function (data) {

            if (data == "no matching items") {

                var msg = getLocalResourceContent("Message.RecordNotFound");

                //$('#searchitemdetail').removeClass("scroll-pane");

                $('#searchitemdetail').removeClass('jspScrollable');

                $('#searchitemdetail').children('.jspContainer').css('height', '40px');

                $('#searchItmHtml').html(msg).css('padding', '10px');

            } else {

                $('#searchitemdetail').children('.jspContainer').css('height', '430px');

                $('#searchItmHtml').html(data).css('padding', '10px');;

            }

            $('#searchitemdetail').show();

         },

        failure: function (errMsg) {

        }

    });

}