-1

I have a search functionality on my app where the table updates whenever the user types on the input box. I have made it working, however, I encountered some weird issue where:

  1. If I type on the search box fast, I get a 500 (Internal Server Error). enter image description here

  2. When I delete the search text by holding the backspace on the keyboard, sometimes, the display table is not updated (it's being updated only once I start searching again).

    All records are 4 in total. When I searched "one one" and deletes the search text by holding the backspace keyboard key, I only get 2 records instead of 4, sometimes only 1 record. But if I only press the backspace repeatedly, I get all the records.

enter image description here



If I type normally or delete the search text's character one by one, I don't encounter the issue.

This is my ajax call through jquery:

enter image description here

This is my controller:

enter image description here

This is the method on my model (Applicant::search()) that handles the search: enter image description here

Lou KnowsAlready
  • 113
  • 7
  • 1
    Have you tried clicking on the 500 error in the DevTools to see what the error is? You probably need to find a denounce to prevent a submission after every character change see [https://stackoverflow.com/questions/27787768/debounce-function-in-jquery](https://stackoverflow.com/questions/27787768/debounce-function-in-jquery), I'm not a jQuery guy, so I don't know if the function had been deprecated. – Azeame Dec 26 '19 at 06:45
  • The error only states that there's an error message. I added the debounce, and it now works. Thank you :) – Lou KnowsAlready Dec 26 '19 at 07:30

1 Answers1

1

The best thing you can do is to add debounce or pass a delay function.

$('#search_applicant').on('input', _.debounce(function (e) {
   // your ajax here
}, 300)); // set your delay here

Refer to this link

Poldo
  • 1,924
  • 1
  • 11
  • 27
  • I've used debounce, thanks for this. I've updated my jquery like this for future reference: $("#search-applicant").on("input", $.debounce(200,function(){ var search_text = $(this).val(); var container = $(".list tbody"); $.ajax({ url: '/applicants/search', method: 'GET', data: { skey: search_text }, success: function(result){ container.empty().append(result); } }); console.log(search_text); })); – Lou KnowsAlready Dec 26 '19 at 07:34