zubairpaizer / react-native-searchable-dropdown

Searchable Dropdown
147 stars 98 forks source link

Delay on typing before search #76

Open vborges1 opened 3 years ago

vborges1 commented 3 years ago

I made some changes in main code, including a debouce to delay to call the method searchedItems, and a fix that solves the problem of not showing first-time searched items if user types a little fast. Hope this code snippet can be helpful to someone.

... ... searchedItems = searchedText => { let {setSort} = this.props;

if (!setSort && typeof setSort !== 'function') {
  setSort = (item, searchedText) => {
    return (
      item.name
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .indexOf(
          searchedText
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .toLowerCase(),
        ) > -1
    );
  };
}
const ac = this.props.items.filter(item => {
  return setSort(item, searchedText);
});

const item = {
  id: -1,
  name: searchedText,
};

this.setState({listItems: ac, item});

const onTextChange =
  this.props.onTextChange ||
  this.props.textInputProps.onTextChange ||
  this.props.onChangeText ||
  this.props.textInputProps.onChangeText;

onTextChange(searchedText);

};

callSearchedItems = text => { clearInterval(this.typeWait);

this.typeWait = setTimeout(() => {
  this.searchedItems(text);
  setTimeout(() => {
    this.searchedItems(text);
  }, 500);
}, 500);

const item = {
  id: -1,
  name: text,
};

this.setState({item});

};

renderTextInput = () => { ... ... { key: 'onTextChange', val: text => { this.callSearchedItems(text); }, },

Abdul786Mannan commented 1 year ago

+1

Abdul786Mannan commented 1 year ago

any one to help ?