Lag on passing AJAX data to PHP

Question

I am trying to create an ajax search. I tried creating a fast loading php and another php pagecontaining the search form.

Search form:

<input id="searchtop" type="text" class="search-field" onkeyup="searchNotes()">

Search PHP link sample:

/searchform/?key=string

The searchNotes() JS function:

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, wait);
    if (callNow) func.apply(context, args);
  }
}

function searchNotes() {

  var searcher = document.getElementById("searchtop").value;
if (searcher.length > 3) {
 currentRequest = jQuery.ajax({
     type: 'GET',
     url: '/searchform/?key='+searcher,
                   cache: false,

     success: function(data) {
             $("#datafetch").html(data);
     }
 })};

}

var debounced = debounce(searchNotes, 50);

window.addEventListener('keyup', debounced);

issue: When I try typing for example "smooth" on the input fast, it works fine at first but then it loads all "smoot", "smoo", etc over the main "smooth" result and "smooth" is removed by jQuery('#datafetch').html(''); by the other incomplete strings.

I wanted to find a way to get the last string that is typed on input whithout the issue.

look into *debounce* and you only need `$("#datafetch").html(data);` — Lawrence Cherone, Oct 31 '19 at 01:17
@LawrenceCherone may I ask for the long answer with _debounce_? — Mehran Shaebani, Oct 31 '19 at 01:21
Sure, [Can someone explain the debounce function in Javascript](https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript) — Lawrence Cherone, Oct 31 '19 at 01:22
@LawrenceCherone so I did it and it almost works,Thanks for that! But it shows the incomplete string results again for 1-2 seconds and then it fixes itself. any idea about that? — Mehran Shaebani, Oct 31 '19 at 01:35
@LawrenceCherone I just found the answer. 1 and 2 letter searchs were buggy and they replaced the main string. I just made a condition that ```searcher.length > 3``` Thanks so much for the help ;) — Mehran Shaebani, Oct 31 '19 at 01:47
@LawrenceCherone oh still that's buggy. I'll update my code edit: updated — Mehran Shaebani, Oct 31 '19 at 01:48
50ms is too short, experiment with the value, it should be more like 300, then it will wait a bit longer between characters, your target wait value is a slow typer, like my nan — Lawrence Cherone, Oct 31 '19 at 02:04
@LawrenceCherone even if I put it on 500ms, after typing something like "smooth criminal" it changes the output to "smooth criminal" results at the moment and after a second or two, it changes to something like "smooth cri". — Mehran Shaebani, Oct 31 '19 at 02:18

score 0 · Answer 1 · answered Oct 31 '19 at 03:28

OK this was my way to fix this:


var searchInput = $("#searchtop");
var searchQueryDisplay = $("#datafetch");

var showSearchQuery = function() {

      var searcher = document.getElementById("searchtop").value;
    if (searcher.length > 3) {

     currentRequest = jQuery.ajax({
         type: 'GET',
         url: '/searchform/?key='+searcher,
                       cache: false,

         success: function(data) {
                 $("#datafetch").html(data);
         }
     })};

    }


var debounceTimeout = null;
searchInput.on('change keyup', function(event){
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(showSearchQuery, 300);
});

Lag on passing AJAX data to PHP

1 Answers1