CODEWITHSUNDEEP
jquery
Damien
Damien

Reputation: 4319

jQuery search as you type with ajax

i'm trying to create a search where you input text into a textfield and onkeyup it will fire a function off that will send the value of the field to a page and return the results to the div container. The problem i'm having is that when someone is typing, there is a horrible lag going on. I think what's going on is that it's trying to search each letter typed in and does each request. How do i make it so that if i type into the box, wait 1/2 a second (500), if nothing is typed in, then do the ajax search,but if in that time frame another letter comes up, don't even bother with the ajax request. I've been busting my head on this and can't figure it out. All help is appreciated!

// fired off on keyup
function findMember(s) {
    if(s.length>=3)
        $('#searchResults').load('/search.asp?s='+s);
}

Upvotes: 30

Views: 66533

Answers (3)

nanobar
nanobar

Reputation: 66355

What this will do is clear the timeout on each press, so if 1/2 second hasn't passed the func wont be executed, then set a timer for 500ms again. Thats it, no need to load a big library..

let timeoutID = null;

function findMember(str) {
  console.log('search: ' + str)
}

$('#target').keyup(function(e) {
  clearTimeout(timeoutID);
  const value = e.target.value
  timeoutID = setTimeout(() => findMember(value), 500)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="target" placeholder="Type something" />

Upvotes: 57

Mayur Narula
Mayur Narula

Reputation: 150

function myFunction(inputText) {
                debugger;
                var inputText = document.myForm.textBox.value;

                var words = new Array();
                var suggestions = "Always", "azulejo", "to", "change", "an", "azo", "compound", "third"];
                if (inputText != "") {
                    for (var i = 0; i < suggestions.length; ++i) {
                        var j = -1;
                        var correct = 1;
                        while (correct == 1 && ++j < inputText.length) {
                            if (suggestions[i].toUpperCase().charAt(j) != inputText.toUpperCase().charAt(j)) correct = 0;
                        }
                        if (correct == 1) words[words.length] = suggestions[i];
                        document.getElementById("span1").innerHTML = words;

                    }
                }

                else {
                    document.getElementById("span1").innerHTML = "";

                }

<p id="demo"></p>
    <form name="myForm">
         <input type="text" name="textBox" onkeyup="myFunction()"/>
         <span id="span1"></span>
    </form>

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382112

The jquery ui autocomplete has this feature.

http://jqueryui.com/demos/autocomplete/

If you don't want to use jquery ui, then look at their source code.

Upvotes: 6

Related Questions