自動完成功能可以在單詞的任何位置匹配模式，只能在開始時匹配嗎？

Question

我正在根據提供給問題的答案對輸入框使用自動完成功能： https : //stackoverflow.com/a/35429210/11082818 。

自動完成功能看起來可以將輸入與JSON的鍵``street''中的模式匹配。此自動完成功能可以工作，但是可以與自動建議單詞中的任何位置的模式匹配。

例如：如果用戶鍵入“ dale”，則將同時建議“ Cransdale Street”和“ Wensleydale Street”。

我想讓它只匹配街道名稱開頭的模式。 因此，如果用戶輸入“ dale”，則不會顯示任何內容。 但是，當用戶輸入“ Cr”時，建議使用“ Cransdale Street”。

在這么小的JSON中這不是問題，但是我有一個包含1000個對象的對象。

var React = require('react-native');
var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TextInput,
  ListView,
  View,
} = React;

var adresses = [
  {
    street: "Cransdale Street",
      city: "Sydney",
    country: "Australia"
    },{
    street: "Wensleydale Street",
      city: "Sydney",
    country: "Australia"
  }
];

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class SampleApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchedAdresses: []
    };
  };

  searchedAdresses = (searchedText) => {
    var searchedAdresses = adresses.filter(function(adress) {
      return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
    });
    this.setState({searchedAdresses: searchedAdresses});
  };

    renderAdress = (adress) => {
    return (
      <View>
        <Text>{adress.street}, {adress.city}, {adress.country}</Text>
      </View>
    );
  };
  render() {
    return (
      <View style={styles.container}>
        <TextInput 
            style={styles.textinput}
            onChangeText={this.searchedAdresses}
            placeholder="Type your adress here" />
        <ListView
                    dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
          renderRow={this.renderAdress} />
      </View>
    );
  };
}

Answer 1

更改

return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;

至

return adress.street.toLowerCase().startsWith(searchedText.toLowerCase());