CODEWITHSUNDEEP
jqueryhtmlreactjstextbox
Bob Smith
Bob Smith

Reputation: 515

Clear textbox without Jquery or hard coding an element

I have a textbox that will dropdown a list of autocomplete options to fill in the textbox once the user enters the first three characters. Upon clicking on one of the autocomplete options, I want the textbox to clear itself. Here is what that element looks like right now: 

 <label
      className="searchSecondary_userFilterFacet"
      hidden={!this.state.isExpanded}
    >
      <div
        className="data-uk-autocomplete"
        id="userFilterTypeahead"
        ref={elem => (this.userFilterTypeahead = elem)}
      >
        <input
          id="textInput_userSearch"
          onKeyUp={this._handleNewUser}
          placeholder="Search Users"
          type="text"
          ref={input => (this.userInput = input)}
        />
      </div>
      {userModifiers}
    </label>

I am using React. Here is what my code to clear the textbox currently looks like:

componentDidMount() {
let element = ReactDOM.findDOMNode(this.userFilterTypeahead);

//bind selection event for user filter autocompletion uikit
$('#userFilterTypeahead').on(
  'selectitem.uk.autocomplete',
  function(event, data, acobject) {
    $('#textInput_userSearch').val('');
    this._editUsersBuffer(data.value, true, true);
  }.bind(this)
);

}

First and foremost I need to remove the Jquery line that is actually clearing the checkbox. I found that replacing it with this.userInput.value="" had no effect and neither did event.target.value="". Secondly, I would like to remove the Jquery line $('#userFilterTypeahead').on( 'selectitem.uk.autocomplete',... but I still need to be triggering my text clearing when the selectitem.uk.autocomplete event occurs. So, I would like to replace this Jquery and am baffled at the complexity that came with clearing a single text box.

Upvotes: 0

Views: 217

Answers (1)

Win
Win

Reputation: 5594

Here's a method using ref, but I would honestly bind it to state since I you can easily do this without using ref and it's commonly good practice to avoid using it unless you need to focus elements, not clear them. I've included an example for both.

If you rely a lot on auto complete I'd suggest using a module pre-built. But the example that I've linked below are very similar but it has been created to accept data. It'll just render a list of results that is shown below the input field when a query matches. https://github.com/moroshko/react-autosuggest

Example using state:

class App extends React.Component {
  state = {
    query: '',
  }
  clearInput = () => this.setState({ query: "" });
  setQuery = (evt) => this.setState({ query: evt.target.value });
  mockSelection = () => {
    if (this.state.query !== '') {
      return <div onClick={this.clearInput}>Click me to clear input</div>;
    }
    return null;
  }
  render(){
    return (
      <div>
        <input 
          type="text"
          placeholder="Please enter a query"
          value={this.state.query}
          onChange={this.setQuery}
        />
        {this.mockSelection()}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Example using ref (Not recommended):

class App extends React.Component {
  state = {
    query: '',
  }
  clearInput = () => this.inputQuery.value = "";
  setQuery = (evt) => this.setState({ query: evt.target.value });
  mockSelection = () => {
    if (this.state.query !== '') {
      return <div onClick={this.clearInput}>Click me to clear input</div>;
    }
    return null;
  }
  render(){
    return (
      <div>
        <input 
          type="text"
          ref={input => this.inputQuery = input}
          placeholder="Please enter a query"
          value={this.state.query}
          onChange={this.setQuery}
        />
        {this.mockSelection()}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 2

Related Questions