Фильтр метода indexOf создает непредвиденный вывод в React

Question

• Я пытаюсь внедрить фильтр, похожий на рейсы Google.
• на рейсах Google, когда я набираю m, это показывает Майами.
• где, как в моем поиске, если я наберу m, он показывает Америку, но должен показывать Майами.
• Я отладил свой код и обнаружил, что он использует метод indexOf для фильтра.
• есть ли способ фильтрации, чтобы я мог исправить свою проблему.
• было бы замечательно, если бы вы дали мне знать, чтобы в будущем я мог исправить это сам.
• предоставляя мой код_снипета, снимок экрана и песочницу ниже

https://codesandbox.io/s/x9q44520oo

Autocomplete.jsx

  onChange = e => {
    const { suggestions } = this.props;
    const userInput = e.currentTarget.value;

    // Filter our suggestions that don't contain the user's input
    const filteredSuggestions = suggestions.filter(
      suggestion =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );
    console.log("filteredSuggestions", filteredSuggestions);

    this.setState({
      activeSuggestion: 0,
      filteredSuggestions,
      showSuggestions: true,
      userInput: e.currentTarget.value
    });
  };

index.js

<Autocomplete
        suggestions={[
          "Alligator",
          "america",
          "Bask",
          "Crocodilian",
          "Death Roll",
          "california",
          "miami",
          "NEPHROLOGY",
          "PEDIATRIC NEPHROLOGY",
          "PEDIATRIC CARDIOLOGY CARDIOVASCULAR DISEASE",
          "PEDIATRIC BEHAVIOR & DEVELOPMENT",
          "PEDIATRIC INTENSIVE CARE",
          "PORTABLE X RAY",
          "PEDIATRICIAN",
          "Eggs",
          "Jaws",
          "Reptile",
          "Solitary",
          "Tail",
          "Wetlands"
        ]}
      />

Answer 1

indexOf вернет значение > -1, если ввод появляется в любом месте искомого текста (suggestion). Похоже, вы хотите включить только предложения, которые начинаются с ввода - есть функция .startsWith, которая будет делать именно это, т.е.

const filteredSuggestions = suggestions.filter(
  suggestion =>
    suggestion.toLowerCase().startsWith(userInput.toLowerCase())
);