Although auto-completion of user input does not fit perfectly into the context of MyPhoto, it is still a very common requirement, so we should dedicate a short section to the topic (albeit without integrating the functionality into MyPhoto). Auto-completion allows for the partial display of a list of items based on user input, and effectively avoids having to load a large amount of data all at once as well as overloading the user with potential choices. One popular third-party library that works seamlessly with Bootstrap is typeahead.js. As noted on their official Github repository (https://github.com/twitter/typeahead. js), typeahead.js is:
“Inspired by the autocomplete search functionality of twitter.com, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.”
“The typeahead.js library consists of two components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but they can provide a rich typeahead experience when used together.”
Before you can begin using typeahead.js, you must install it using bower. We explicitly do not recommend installing Typeahead using NPM, as there exists no “dist version” for the node. This means that the user may need to concatenate all the .js files. The node package also misses jquery-typeahead.js:
bower install typeahead.js
Next, include the JavaScript files in the footer of your page:
<script
src=”bower_components/typeahead.js/dist/typeahead.bundle.min.js”></script>
<script
src=”bower_components/typeahead.js/dist/typeahead.jquery.min.js”></script>
<script
src=”bower_components/typeahead.js/dist/bloodhound.min.js”></script>
Before we can initialize the typeahead, we must first create an input box:
<div id=”my-control”>
<input class=”typeahead form-control” type=”text” placeholder=”People”>
</div>
To initialize the typeahead, we use the typeahead function:
$(‘#my-control .typeahead’).typeahead(options, dataset);
The options variable should point to an object containing the configuration for the typeahead:
var options = {
hint: true, // Default
highlight: true,
minLength: 5
};
minLength denotes the number of characters that the user has to type before highlighting will begin. Setting highlight to true will bolden any string matches while enabling hint (enabled by default) will show the hint. Additionally, the classNames parameter can be used to override the default class names.
For a rich library of examples, take a look at the typeahead.js documentation and examples page.
The dataset parameter is used to provide typeahead with the actual data to use. It consists of an object with a name property (which refers to the dataset’s name) and a source property, which is a function that generates the actual data to show; refer to the following example (based on the official typeahead.js “Basic Example”):
const people = [‘John Appleseed’, ‘Joe Rogan’, ‘Adam Smith’, ‘Mark Spencer’];
function source (choices) {return function (q, callback) {
const regex = new RegExp(q);
const results = [];
for (var i = 0; i < choices.length; i++) {
const item = choices[i];
if (regex.test(item)) {
results.push(item);
}
}
callback(results);
};
}
$(‘#my-control .typeahead’).typeahead({ highlight: true, minLength: 5 }, {
name: ‘people’,
source: source(people),
limit: 5, // Limit the number of shown suggestions to 5
async: false // Set this to true if the data is async
});
For more information on how to configure the Typeahead.js dataset, check out ;
https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md.
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.