0

I got a textbox that once the user stops typing, I want to update the results(what ever they type will be applied to an array of data and will filter down anything that does match what they type).

Right now I am using onBlur but this of course will only activate after they leave the textbox.

Would it be better to do onChange and put a timer that gets cancelled if they continue to type?

Or is there a better way.

Not sure if it makes a difference but I am reactjs

vsync
  • 118,978
  • 58
  • 307
  • 400
chobo2
  • 83,322
  • 195
  • 530
  • 832
  • 1
    what do you mean `I want to update the results`.. I honestly do not understand the scenario here. Can you please make it more clear? – vsync Sep 20 '18 at 19:43
  • 3
    I think you want to use a debounced onChange event (see lodash for example). – samsonthehero Sep 20 '18 at 19:44
  • Maybe https://stackoverflow.com/q/23123138/125981 – Mark Schultheiss Sep 20 '18 at 19:52
  • 1
    also a debounce function example in this answer https://stackoverflow.com/a/37284592/125981 and here https://stackoverflow.com/a/47876137/125981 if you want something simple – Mark Schultheiss Sep 20 '18 at 19:56
  • I have an answer to a similar question, to "run a function after a user has finished typing in a text field", https://stackoverflow.com/a/37494269/2430549 – HoldOffHunger Sep 20 '18 at 20:13
  • @MarkSchultheiss - your first link with the react debouncing looks interesting but I am bit confused as the code is outside the component. I going to have multiple of these textboxes so I need a different one for each of these textboxes, but I can't hardcode it as there are n amount of textboxes. – chobo2 Sep 20 '18 at 20:33
  • @chobo2 - create your attempt then post that and perhaps someone can assist you in fixing that. THIS is exactly why you ALWAYS need to create code and put it in your question, which basically says "follow the question rules" in creating a viable question here - do that to keep your question from being closed as off topic "why isn't this code working?" no code OR closed as duplicate. You state "Right now I am using onBlur" but do not post that even. – Mark Schultheiss Sep 21 '18 at 15:09
  • @chobo2 Knowing how to create an "instance" of a generic set of JavaScript (functions etc) is key to understanding and using it at scale just as you note in your comment. SO,perhaps that becomes part of your enhanced question here? – Mark Schultheiss Sep 21 '18 at 15:13

2 Answers2

3

Vanilla javascript (no React)

var inputElm = document.querySelector('input');

inputElm.addEventListener('input', onInput);

function onInput(){
  var duration = 1000;
  clearTimeout(inputElm._timer);
  inputElm._timer = setTimeout(()=>{
    update(this.value);
  }, duration);
}

function update(){
   console.log('Do something')
}
<input>

In React you would probably do it like this:

class SomeComp extends Component {
    constructor(props){
        super(props);

        this.state = {
            inputValue: ''
        }
    }

    onInput = (e) => {
        var duration = 1000;
          clearTimeout(this.inputTimer);
          this.inputTimer = setTimeout(()=>{
            this.updateInputValue( e.target.value );
        }, duration);
    }

    updateInputValue = ( value )=> {
        this.setState({
            inputValue: value
        });
    }

    render(){
        return(
            <input value={this.state.inputValue} onChange={this.onInput(evt)}/>
        )
    }
}
vsync
  • 118,978
  • 58
  • 307
  • 400
-5

Just use onkeyup event it will fire when user releases keyboard button.

document.getElementById('inputText').onkeyup = UpdateData()
user18984
  • 57
  • 1
  • 9