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

  });

});


});

这是 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>


九州编程
浏览 116回答 1
1回答

繁星点点滴滴

我找到了解决方案**这是通过改变$(document).on("click",&nbsp;".sucherres&nbsp;ul&nbsp;li&nbsp;p",&nbsp;function(){到$(document).off('click').on("click",&nbsp;".sucherres&nbsp;ul&nbsp;li&nbsp;p",&nbsp;function(){所以只需添加.off('点击')**
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript