选择并按回车时自动完成 jQueryUI 双调用功能答案

【问题标题】：Autocomplete jQueryUI double call function on select and press enter选择并按回车时自动完成 jQueryUI 双调用功能
【发布时间】：2016-03-21 21:45:55
【问题描述】：

我需要一些帮助。这是我的 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(); 
    }
  });
});

当我按下回车时，我想调用MainFunction()，当我从自动完成中选择一个项目时也调用这个函数关键是，当我选择一个项目并按 Enter 键时，MainFunction() 会被调用两次。
我不知道如何解决这个问题。

感谢您的回答！

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

我认为你在同一个事件上调用了两次相同的函数，所以它调用了两次主函数。即使您按 Enter，它也是一个 keypress/keyup/keydown 事件。因此，当文档准备好时，它已经被调用一次，并在您的 enter keypress 事件中被调用。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

看来我的问题解决了！

在我的 MainFunction() 中，我有一个异步错误的 AJAX 调用 (ASP.NET)。我试图将此调用异步更改为true。现在，仅触发事件autocompleteselect！
但是，我不知道为什么keypress不再被触发。如果我发现为什么 async false 在autocompleteselect 之后也会触发keypress，我会继续寻找并编辑这个答案，以防其他人有同样的问题。

【讨论】：