选择并按Enter时自动完成jQueryUI双重调用功能

Question

I'd like some little help. Here's my JsFiddle : https://jsfiddle.net/Mirawen/q59nqh2z/

function keyPress(keyEvent)
{  
  if (keyEvent.which == 13)
    MainFunction();
}

function MainFunction()
{
  alert("Hello World");
}

var arrSource = ["foo", "foooo", "foooooo", "bar", "barr", "barr"];

$(document).ready(function() {
  $("#txtSearch").autocomplete({
    source: arrSource,
    minLength: 1,
    select: function (event, ui)
    {
      MainFunction(); 
    }
  });
});

When I press enter, I want to call MainFunction() , and also call this function when I select an item from autocomplete The point is, when I select an item and press enter, MainFunction() is called twice.
I don't know how to solve this.

Thanks for your answers !

Answer 1

I think that you are calling the same function twice on same event,so it is calling main function twice. Even if you press enter it is a keypress/keyup/keydown event. So, when document is ready, it is getting called already once and gets called on your enter keypress event.

Answer 2

 function addEnterKeyHandler() { $( "#txtSearch" ).keypress(function( event ) { if ( event.which == 13 ) { MainFunction(); } }); } function removeEnterKeyHandler(){ $('#txtSearch').unbind("keypress"); } function MainFunction() { alert("Hello World"); } var arrSource = ["foo", "foooo", "foooooo", "bar", "barr", "barr"]; $(document).ready(function() { addEnterKeyHandler(); $("#txtSearch").autocomplete( { source: arrSource, minLength: 1, selecting: function(event, ui){ canPressEnter = false; }, select: function (event, ui) { removeEnterKeyHandler(); MainFunction(); addEnterKeyHandler(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"> <div> <input type="text" id="txtSearch" onkeypress="keyPress(event);" /> <button type="button" title="Search" onclick="MainFunction();">Search </button> </div> 

Answer 3

So it seems that I solve my issue !

In my MainFunction(), I've an AJAX call (ASP.NET) with async false. I tried to change this call async to true. Now, only the event autocompleteselect is triggered !
But, I don't have any clue why keypress isn't triggered anymore. I'll keep looking, and edit this answer if I find why async false also trigger keypress after autocompleteselect , in case if someone else has the same issue.