React-select: Minimum number of characters to start the search

[hos4m]

Hi,
Is there an option to start the search with the first character typed? Currently I have to type 2 characters for the search to kick in, is it possible to make it customizable?

Thanks.

[yana95]

I have the same issue

[hos4m]

@yana95 There is 815 open issues, I don't expect we get an answer soon.

[AuthorProxy]

the same problem

[hbansal0122]

you can use onInputChange and call a function and check if the length of entered content I greater than the minimum required if yes then change a state variable (option_true) to true other wise false.

<Select
  value={tagsSkills}
  onChange={this.function}
  options={this.state.option_true ? options : []}
  onInputChange={this.new_function}
  multi={true}
  placeholder="enter you choice"
/>

[dzg]

Can someone elaborate? I see "resolved" ... how?
And I can't make sense of @hbansal0122 answer.
How can I set minLength to 1?

[jossmac]

@dzg this issue is resolved in v2. If you're using v1 this may still be an issue.

The minLength is already 1, a filter isn't performed without text.

The method above involves taking control of the input value, using the onInputChange prop, and performing your own filter. Then pass those filtered options on to the select.

[hbansal0122]

@dzg
Hey, I am not able to understand fully, what do you mean by min length = 1.
How can we perform any action without entering a single character and if we are entering a single character then "onInputChange={this.new_function}" this should work or some hover thing can be used to perform something else.

[ShivaniBali]

@hbansal0122 : can you please show a reference of new_function. I'm new to react would like to see how you apply it on select drop down?

[Flamingo09]

Here you go

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showOptions: false
    }
  }


  handleInputChange = (typedOption) => {
    if( typedOption.length > 1 ) {
      this.setState(
        { showOptions : true },
        () => console.log('Shown')
      )
    }
    else {
      this.setState(
        { showOptions : false },
        console.log('Option lenght is short {} {}', typedOption, typedOption.length)
      )
    }
  }

  render() {
    console.log(this.props);
    const { selectedOption } = this.state;
    return(
      <Select value={selectedOption} options={ this.state.showOptions ? options : [] } onChange={ this.handleChange }
        onInputChange = { this.handleInputChange }
        components={
          {
            DropdownIndicator: () => null,
          }
      />
)
}

@hbansal0122 : can you please show a reference of new_function. I'm new to react would like to see how you apply it on select drop down?