How do I stop the page reload after selecting an autocomplete suggestion

Question

I made an autocomplete for a form input field that allows a user to add tags to a list of them. If the user selects any of the suggestions, I want the page to use add the new tag to a section of tags that already exist without the page reloading.

I want this to happen with 3 scenarios:

1. The user types in the tag, ignores the autocomplete suggestions and presses enter.
2. After typing in any part of a query, the user selects one of the autocomplete suggestions with the arrow keys and presses enter.
3. After typing in any part of a query, the user clicks on one of the autocomplete suggestions with the mouse.

I have been able to make scenario 1 work flawlessly. However, scenarios 1 and 2 make the page reload and still doesn't even add the tag to the list.

Scenarios 1 and 2 are both called by the same function:

$j("#addTag").autocomplete({
  serviceUrl:'/ac',
  onSelect: function(val, data){
    addTag(data);
  }
});

And here is the code for addTag():

function addTag(tag){
  var url = '/addTag/' + tag;

  //Call the server to add the tag/
  $j.ajax({
    async: true,
    type: 'GET',
    url: url,
    success:function(data){
      //Add the tag to the displayed list of already added tags
      reloadTagBox(data);
    }, 
    dataType: "json"
  });

  //Hide the messages that have been displayed to the user
  hideMessageBox();
}

Scenario 1 code:

function addTagByLookup(e, tag){
  if(e && e.keyCode == 13)
  {
    /*This stops the page from reloading (when the page thinks 
      the form is submitted I assume).
    */
    e.preventDefault();
    //If a message is currently being displayed to the user, hide it
    if ($j("#messageBox").is(":visible") && $j("#okayButton").is(":visible")){
      hideMessageBox();
    }

    else{  
      //Give a message to the user that their tag is being loaded
      showMessageBox("Adding the tag <strong>"+tag+"</strong> to your station...",'load');

      //Check if the tag is valid
      setTimeout(function(){
        var url = '/checkTag/' + tag;
        var isTagValid = checkTag(tag);

        //If the tag is not vaid, tell the user.
        if (isTagValid == false){
          var message = "<strong>"+tag+"</strong>"+
                      " was not recognized as a valid tag or artist. Try something   else.";
          //Prompt the user for a different tag
          showMessageBox(message, 'okay');
        }

        //If the tag is valid
        else{
          addTag(tag);
        }
      }, 1000);
    }
  }
}

I know I used the e.preventDefault functionality for a normal form submit in scenario 1, but I can't seem to make it work with the other scenarios and I'm not even sure that is the real problem.

I am using pylons as the MVC and using this tutorial for the autocomplete.

Answer 1

So in case anyone wants to know, my problem was had an easy solution that I should have never had in the first place.

My input tag was embedded in a form which submitted every time the input tag was activated.

I had stopped this problem in scenario 1 by preventing the default event from occurring when the user pressed enter. But since I didn't have access to this event in the jQuery event .autocomplete(), I couldn't prevent it.