Autocomplete is matching to pattern anywhere in words, can it match only at the start?

Question

I am using an autocomplete for an input box based on the answer provided to question: https://stackoverflow.com/a/35429210/11082818.

The autocomplete looks to match the input to a pattern in the key 'street' in a JSON.This autocomplete works, however, it matches to a pattern anywhere in the autosuggest words.

For example: If the user types "dale" it will suggest both "Cransdale Street" and "Wensleydale Street".

I'd like to get it to only match patterns from the start of the street names. So if the user enters "dale" nothing comes up. But as the user enters "Cr" then "Cransdale Street" is suggested.

This isn't an issue in such a small JSON but I have one that has 1000's objects.

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

Change

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

to

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