自动完成jQueryUI双调用功能，然后选择并按回车键

Autocomplete jQueryUI double call function on select and press enter

本文关键字：选择 然后 回车 功能 jQueryUI 调用      更新时间：2023-09-26

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

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

感谢您的回答！

我认为您在同一个事件上调用了两次相同的函数，因此它调用了两次主函数。即使您按回车键，它也是一个按键/键/键下事件。因此，当文档准备就绪时，它已经被调用一次，并在您的 Enter 按键事件中调用。

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>

所以看起来我解决了我的问题！

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

相关文章：