搜索文本过滤仅识别第一个输入

Question

I am facing an issue with my search bar filter. For example, I want names either bitcoin or btc to be searchable in my flatlist. However, it only picks up on the first (bitcoin) and when I type (btc) the flatlist is unchanged. I have noticed by switching around the variables item.CoinInfo.FullName or item.CoinInfo.Name it only picks up whatever is listed first.

search = searchText => {
    this.setState({searchText: searchText});

    // searchText empty, reset filtered array
    if (!searchText) {
      this.setState({filteredCryptos: []});
      return;
    }

    let filteredCryptos = this.state.cryptos.filter(function (item) {
      // Defaults to empty string
      let name = item.CoinInfo
        ? item.CoinInfo.FullName || item.CoinInfo.Name || ''
        : '';

      // If no such property, skip
      if (!name) {
        return false;
      }

      // Change to both to lowercase, as you want to match 'bitcoin' and 'Bitcoin'
      return name.toLowerCase().includes(searchText.toLowerCase());
    });
    this.setState({filteredCryptos: filteredCryptos});
  };

Answer 1

This is the issue

let name = item.CoinInfo
        ? item.CoinInfo.FullName || item.CoinInfo.Name || ''
        : '';

The name variable becomes the first item that has a truthy value, and thus will only compare whichever item you place first (or '' if both arent truthy). You need to do a comparison for both the FullName and the Name variable.

search = searchText => {
    this.setState({searchText: searchText});

    // searchText empty, reset filtered array
    if (!searchText) {
      this.setState({filteredCryptos: []});
      return;
    }

    let filteredCryptos = this.state.cryptos.filter(function (item) {
      // Defaults to empty string
      let {FullName, Name } = item.CoinInfo

      // If no such property, skip
      if (!Name && !FullName) {
        return false;
      }
      // this way gives Name (short name) precedence
      return Name.toLowerCase().includes(searchText.toLowerCase()) ||
            FullName.toLowerCase().includes(searchText.toLowerCase());
      // this way give FullName precedence
      return FullName.toLowerCase().includes(searchText.toLowerCase()) ||
            Name.toLowerCase().includes(searchText.toLowerCase()) 
    });
    this.setState({filteredCryptos: filteredCryptos});
  };

By using the or || operator, if the first value fails to be true, then the second one will be executed, allowing you to search both FullName and Name when needed