AutoComplete与单词中任何地方的模式都匹配，它只能在开始时匹配

Question

我正在根据提出的答案使用一个输入框的自动完成：https：//stackoverflow.com/a/35429210/11082818。

自动完成旨在将输入与JSON中的"街道"中的图案匹配。但是，此自动完成作品与最符合自动单词的任何位置相匹配。

例如：如果用户类型为" dale"，它将暗示" Cransdale Street"one_answers" 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;

to

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