Are you referring to an autocomplete, like the TypeAhead feature?
Check out this link for examples of it in action
Implementing it is quite simple, just use its designated class and call the script:
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
--
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
// initializing array for substring matches
matches = [];
// regex used to check if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// looping through strings and adding those containing `q` to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push({ value: str });
}
});
cb(matches);
};
};
// List of states for autocomplete
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', ...];
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});