Typehead.js autopredict state search example

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>State search</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container text-center">
          <h1>State search</h1>
        	<div class="form-group" id="remote">
                <input type="text" class="form-control typeahead" id="state" name="state">
        	</div>
        </div>
        <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
    </body>
</html>

CSS

Javascript

var matchString = function(data) {
 	return function findMatches(q, cb) {
   		var matches, substringRegex;

   		matches = [];

    	substrRegex = new RegExp(q, 'i');

    	$.each(data, function(i, str) {
     		if (substrRegex.test(str)) {
        		matches.push(str);
      		}
    	});

    	cb(matches);
		};
};

var states = [
	'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
	'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
	'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
	'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
	'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
	'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
	'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
	'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
	'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#state').typeahead({
 	hint: true,
 	highlight: true,
 	minLength: 1
},{
  	name: 'states',
  	source: matchString(states)
});