Jquery is sending multiple requests

Question

I'm trying to make a search bar which sends a request for proposals from the entered letter. jQuery is sending the same number of requests as the number of the entered letters.

If I write "sa" jQuery is sending 2 requests. If I write "Sa" jQuery is sending 3 Requests (the big letter is counted as 2 letters since I'm pressing shift".

The code should work like the following instructions: The user writes the name of what he wants to found and the code search in the database and shows all possible search words. EDITS: the script should send 2 Request: the first one to get all results which have "sa". after selecting a result. it should send only one request to the database to get the rest of the information. what my script is doing: he is sending the firs request as he should do. the second request is getting send as same time as the number of the letters. even when only one request is enough

here is also a link to a youtube video which I record to explain the problem

Here is my jQuery code:

$('.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
  });
});

});

Here is the Html Code:

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

You're using the `keyup` event. Every time a key is released (key "up") it'll fire. It's doing what you told it to... what *do* you want it to do? — ceejayoz, Sep 30 '19 at 20:01
`Sa` is three keys ... `shift` `s` `a` .... it's doing exactly what it's being told. — dazed-and-confused, Sep 30 '19 at 20:04
It is doing exactly what it is told to do. You should examine the key stroke and fire search only if the key are within a range. Secondly, this is what autocomplete does... it searches after user enters each letter. — Nawed Khan, Sep 30 '19 at 20:04
I want it to send only one request to the database. it's sending like 33 requests after each other ..... — Assad Rajab, Sep 30 '19 at 20:04
@AssadRajab that is exactly what autocomplete is meant to do. If you want to search ONLY after the user is done typing then you'd have to add a search button that he will click on. — Nawed Khan, Sep 30 '19 at 20:05
Or only execute search when the key that the user hit is Enter key. — Nawed Khan, Sep 30 '19 at 20:07
Possible duplicate of [javascript/jquery - add debounce to a button](https://stackoverflow.com/questions/8055923/javascript-jquery-add-debounce-to-a-button) — Michelangelo, Sep 30 '19 at 20:09
Guys. the script should send 2 Request: the first one to get all results which have "sa". after selecting a result. it should send only one request to the database to get the rest of the information. what my script is doing: he is sending the firs request as he should do. the second request is getting send as same time as the number of the letters. even when only one request is enough... I'm new too to the jquery so please be patient — Assad Rajab, Sep 30 '19 at 20:09
@AssadRajab You should read up on debounce. That is how search boxes work most of the time. — Michelangelo, Sep 30 '19 at 20:18
Going by the author's answer below, the debounce is not their primary concern. It's the fact that they were creating a click binding inside the keyup binding, thus creating duplicate event bindings every time a keyup happens — Taplar, Sep 30 '19 at 20:19

score 0 · Accepted Answer · answered Sep 30 '19 at 20:15

0

I found the solution**

it's by changing

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

to

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

so simply by adding

.off('click')

**

answered Sep 30 '19 at 20:15

Assad Rajab

29
7

Or if you didn't create an event binding inside an event listener, you wouldn't have that issue in the first place. – Taplar Sep 30 '19 at 20:17
1

@Taplar Thank you, man. I have finally understood why it is happening. Thank you very much – Assad Rajab Sep 30 '19 at 20:21
Consider creating a scoped namespace, which is just a function you call with all your logic in it. Inside that namespace, create your bindings once, and make the variables you set in the keyup one be scoped to the namespace, not the keyup method. Then you don't have to destroy and recreate the click handler over and over. They can just share the variables. – Taplar Sep 30 '19 at 20:22

Jquery is sending multiple requests

1 Answers1