Skip to content

Instantly share code, notes, and snippets.

@rommyarb
Created November 8, 2018 07:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rommyarb/460ed973f383f7bd87db7ab98d5c86a0 to your computer and use it in GitHub Desktop.
Save rommyarb/460ed973f383f7bd87db7ab98d5c86a0 to your computer and use it in GitHub Desktop.
[js] [html] How to handle input onChange while searching
var typingDelay = 500; // miliseconds
var timer = null;
function showSpinner(){
// ...
}
function hideSpinner(){
// ...
}
function doAjax(value){
// ...
}
////////////// USING JQUERY ///////////////////////
$("#my-input").on("input propertychange", function(){
showSpinner();
var value = this.value;
if(timer !== null) clearTimeout(timer);
if(value === ""){
hideSpinner();
} else{
timer = setTimeout(function(){
doAjax(value);
}, typingDelay);
}
});
////////////// USING REACT JS / ES6 ///////////////////////
// inside class:
onChangeInput = value => {
this.setState({
showSpinner: true
});
if(timer !== null) clearTimeout(timer);
if(value === ""){
this.setState({
showSpinner: false
});
} else{
timer = setTimeout(()=>{
this.doAjax(value);
}, typingDelay);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment