Javascript Jquery正在发送多个请求

我正在尝试做一个搜索栏，从输入的信件中发送建议请求。jQuery发送的请求数与输入的字母数相同

如果我写“sa”，jQuery将发送2个请求。如果我写“Sa”，jQuery将发送3个请求（因为我按下shift键，所以大号字母将计为2个字母）

代码的工作原理应该如下所示：用户将要查找的内容的名称和代码搜索写入数据库，并显示所有可能的搜索词。 编辑： 脚本应该发送2个请求：第一个请求获取所有包含“sa”的结果“。在选择一个结果后。它应该只向数据库发送一个请求以获取其余信息。我的脚本正在执行的操作：他正在发送第一个请求，正如他应该做的那样。第二个请求的发送时间与信件的数量相同。即使只有一个请求就足够了

以下是我的jQuery代码：

$('.sucherInput').on('keyup', function () {
// ** .sucherInput is the class of the input field
var inputValue = $('.sucherInput').val();
var result      = $(".sucherres");
var resultList  = $(".sucherres ul");

if (inputValue.length) {
  console.log(inputValue);

  $.post("action/php/artikelSucher.php", {                   
    name: inputValue

  }).done(function(data){                     
    // Display the returned data in browser
    //console.log(data); 

    resultList.html(data);
    result.show();
  }); //.done

} else{
  console.log("empty");
  resultList.empty();
  result.hide();
}

$(document).on("click", ".sucherres ul li p", function(){
  //set the search bar value as same as the clicked <p> tag
  $('.sucherInput').val($(this).text());

  //clear the Proposals list
  $(resultList).empty();
  $(result).hide();

  //renew the value of the search bar 
  //since im taking the value which have to be searched in the database from the searchbar
  var sucherLastIndex = $('.sucherInput').val();
  console.log("Getting data from database: " + sucherLastIndex);

  //load the data into the HTML file
  $("#updateDiv #info").load("action/php/index-preis-liste.php", {
    name: sucherLastIndex
  });
});

});

$（'.sucheriput'）。在（'keyup'，函数（）{
//**.sucherInput是输入字段的类
var inputValue=$（'.sucheriput'）.val（）；
var结果=$（“.sucherres”）；
var resultList=$（“.sucherres ul”）；
if（inputValue.length）{
console.log（输入值）；
$.post（“action/php/artikelSucher.php”，{
名称：inputValue
}).done（函数（数据）{
//在浏览器中显示返回的数据
//控制台日志（数据）；
html（数据）；
result.show（）；
})完成
}否则{
控制台日志（“空”）；
resultList.empty（）；
result.hide（）；
}
$（文档）.on（“单击“，”.sucherres ul li p”，函数（）{
//将搜索栏值设置为与单击的标记相同
$（'.sucheriput'）.val（$（this.text（））；
//清除提案清单
$（resultList.empty（）；
$（结果）.hide（）；
//更新搜索栏的值
//因为我从搜索栏中获取了必须在数据库中搜索的值
var sucherLastIndex=$（'.sucherInput'）.val（）；
log（“从数据库获取数据：+sucherLastIndex”）；
//将数据加载到HTML文件中
$（“#updateDiv#info”）.load（“action/php/index preis liste.php”{
名称：sucherLastIndex
});
});
});

以下是Html代码：

<div class="sucher">
     <ul style="width: 100%; margin-bottom: 0;">
         <li style="width: 33%;">
             <input type="text" class="sucherInput" placeholder="Geben Sie einen Suchbegriff ein">
         </li>
     </ul>
     <div class="sucherres">
         <ul>
            <!-- ## HERE COMES THE Proposals ## -->          
         </ul>
  </div>

  <div id="info">

  </div>

宽度：100%；页边距底部：0；“>
宽度：33%；“>

我找到了解决方案**

这是通过改变

$(document).on("click", ".sucherres ul li p", function(){

到

因此，只需添加

.off（'click'）

---

**

您正在使用

keyup

事件。每次释放一把钥匙（钥匙“向上”）时它会开火。它在做你告诉它的事…你想让它做什么？

Sa

是三个键…

shift

s

a

…它在做你告诉它的事。然后将它从

keyup

更改为其他可能的重复项。根据下面作者的答案，去抖动不是它们的主要原因担心。事实上，他们在keyup绑定中创建了一个click绑定，因此每次keyup事件发生时都会创建重复的事件绑定。如果你没有在事件侦听器中创建事件绑定，你一开始就不会有这个问题。@Taplar谢谢你，伙计。我终于明白了为什么会发生这种情况。谢谢你你通常会考虑创建一个作用域名称空间，这只是一个你调用的函数，其中包含了你所有的逻辑。在这个名称空间中，创建一次绑定，并将你在keyup中设置的变量作用域设置为名称空间，而不是keyup方法。这样你就不必反复破坏和重新创建click处理程序。它们可以我们必须共享变量。

$(document).off('click').on("click", ".sucherres ul li p", function(){