How can I ensure that a javascript function will work on multiple calls?

Question

I have a basic search feature where I can enter a search query into a field which will display a drop down list of suggested results. I can click on any of the suggested results and the value for that record (stored in a MySQL database) is inserted into the field, as I have intended. However, if I try to do the same thing immediately after the first run of the script, then it doesn't work. But, if I reload the page, then it will work again. In other words, it will work the first time I run the script, but not on subsequent runs of the script, unless I reload the page. It's as if by running the script it 'turns itself off' after the first run, not letting me run the script again. Any ideas? Here is the code:

<script>
$(function(){ 
    var index = -1;
    $('#myID').keyup(function(e){
        if (e.keyCode == 38){ 
            index = (index == 0) ? 0 : index - 1;
            $('tr.myRow').removeClass('gray');
            $('tr.myRow:eq(' + index + ')').addClass('gray');
            return false;
        }
        else if (e.keyCode == 40){ 
            index = (index + 1 >= $('tr.myRow').length) ? $('tr.myRow').length - 1 : index + 1;
            $('tr.myRow').removeClass('gray');
            $('tr.myRow:eq(' + index + ')').addClass('gray');
            return false;
        }
        else
        {
            var str = $('#myID').val();
            mySearch(str);
        }
        index = -1;
    }); 
});
</script>

<script>
$(function(){
    $('#myID').keydown(function(e){
        if (e.keyCode == 13){
            var functionName = $('#pageSearch1 > tbody > tr.gray').attr("onclick");
            setTimeout(functionName, 0)
            $('#pageSearch').css({'visibility': 'hidden'});
            return false;
        }
    });
 });
</script>

The "onClick" attribute is the following script:

function insertPageIDIntoHiddenField(pageID,pageName)
{
    $('tr#eventPageID td#loc input#locationID').val(pageID);
    $('tr#eventPageID td#loc input#myID').replaceWith('<input id="myID" class="event_form_long" type="text" name="location" value="'+pageName+'" autocomplete="off" />');
    $('tr#eventPageID td#loc input#myID').text(pageName);
    $('#pageSearch').replaceWith('<div id="pageSearch"></div>');
}

Answer 1

I have used the autocomplete function of jquery to achieve the suggestion on keypress I hope this could help u

$('#txtSearchText').autocomplete({
source: function(request, response) {
$.ajax({
url: SearchPath + "SearchWebService.asmx/GetUserList",
data: JSON2.stringify({ userName: $('#txtSearchText').val()}),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value:item.UserName
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1
});