In addition to the above, I have also used a dataset for list of pizza toppings from\u00a0Corpora<\/a><\/p>\n Bootstrap is a front-end framework for designing responsive websites. We also include JQuery since Bootstrap needs it. The JQuery library makes writing JavaScript a breeze. Node.js in essence is JavaScript on the server-side. The Express module is used to create a server to serve files and resources to the browser.<\/p>\n The project assets are stored as follows<\/p>\n css<\/em><\/strong>: The css folder holds the bootstrap css files downloaded from Bootstrap Website.<\/p>\n dataset<\/em><\/strong>: We keep the dataset file from Corpora in the dataset folder.<\/p>\n fonts<\/em><\/strong>: The fonts which accompany the bootstrap css files are placed in this folder.<\/p>\n js<\/em><\/strong>: All JavaScript files, including the ones we create, and also bootstrap files go into this folder.<\/p>\n index.html<\/em><\/strong>: This is the root page on which we see the Autocomplete example in action. I borrowed the initial from Bootstrap Getting Started section and then customized it to the project’s requirements.<\/p>\n bootstrap.autocomplete.js<\/em><\/strong>: This JavaScript files contains our code to enable the autocomplete feature.<\/p>\n index.js<\/em><\/strong>: This file is the entry point of our application.<\/p>\n To begin, we add an input tag decorated with the attribute index.html<\/em><\/span><\/p>\n In this section we will write the JavaScript required to enable the autocomplete feature. Lets go through the JavaScript functions one by one and learn what each one does.<\/p>\n First of all we loop over input tags decorated with bootstrap.autocomplete.js<\/em><\/span><\/p>\n Then we bind to click event of each suggestion because when a suggestion is clicked we want to populate its value in the input tag and close the suggestions list.<\/p>\n bootstrap.autocomplete.js<\/em><\/span><\/p>\n Finally we call the method that makes the magic. This method sets up each input tag so that a suggestions list can be displayed when the user enters data into them.<\/p>\n bootstrap.autocomplete.js<\/em><\/span><\/p>\n Here we handle the keyup event of each input. So that we can handle Up or Down Arrow keys as well as Enter key pressed by a user. We move the highlighting among suggestions according to the Arrow key pressed. But if Enter key is pressed we populate the selected suggestion in the input. In case of any other key we update the list of displayed suggestions.<\/p>\n bootstrap.autocomplete.js<\/em><\/span><\/p>\n This function creates the Html markup with the list of matching suggestions. Then it shows it as a Bootstrap modal window under the input tag that it has passed to it.<\/p>\n bootstrap.autocomplete.js<\/em><\/span><\/p>\n Using JQuery’s bootstrap.autocomplete.js<\/em><\/span><\/p>\n This method displays the markup with the list of suggestions passed to it by creating a new or updating the existing autocomplete modal window. The modal window is also positioned under the related element.<\/p>\n bootstrap.autocomplete.js<\/em><\/span><\/p>\n To run the project we type the following in a command window at the root of the project:<\/p>\n Navigate to the URL This wraps up the Bootstrap Autocomplete Example.<\/p>\n2. Project Structure<\/h2>\n
![\"Project](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/ProjectStructure.jpg\")
<\/a>3. HTML Markup<\/h2>\n
data-autocomplete<\/code> with value pizzaToppings<\/code> to the HTML page and a corresponding label. As a result our index.html page looks like below.<\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta http-equiv=\"X-UA-Compatible\"content=\"IE=edge\">\r\n<meta name=\"viewport\"content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n<title>Bootstrap Autocomplete Example - Web Code Geeks<\/title>\r\n\r\n<!-- Latest compiled and minified CSS -->\r\n<link rel=\"stylesheet\"href=\"\/css\/bootstrap.min.css\">\r\n\r\n<!-- Optional theme -->\r\n<linkrel=\"stylesheet\"href=\"\/css\/bootstrap-theme.min.css\">\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"panel panel-info\">\r\n<div class=\"panel-heading\">\r\n<h1>WebCodeGeeks - Bootstrap Autocomplete<\/h1>\r\n<\/div>\r\n<div class=\"panel-body\">\r\n<div class=\"form-group\">\r\n<label for=\"favoritepizzatoppings\">Favorite Pizza Topping<\/label>\r\n<input class=\"form-control\" id=\"favoritepizzatoppings\" data-autocomplete=\"pizzaToppings\" placeholder=\"Enter favorite pizza topping...\"autocomplete=\"off\" \/>\r\n<\/div>\r\n<\/div>\r\n<\/div>\u00a0\r\n\r\n<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n<scriptsrc=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script>\r\n\r\n<!-- Include all compiled plugins (below), or include individual files as needed -->\r\n<!-- Latest compiled and minified JavaScript -->\r\n<script src=\".\/js\/bootstrap.min.js\"><\/script>\r\n<script src=\".\/js\/bootstrap.autocomplete.js\"><\/script>\r\n<style type=\"text\/css\">\r\n.badge{\r\nmargin-left:5px;\r\n}\r\n.modal{\r\nright:auto;\r\n}\r\n<\/style>\r\n<\/body>\r\n<\/html><\/pre>\n4. JavaScript<\/h2>\n
4.1. Get Suggestions List<\/h3>\n
data-autocomplete<\/code> attribute while fetching list of suggestions for each. Since we are accessing DOM elements the page needs to be rendered completely therefore we write the code in JQuery document ready callback.<\/p>\nvar suggestions = {};\r\n\r\nvar autocompleteWidget;\r\n$(document).ready(function () {\r\n\r\n\/\/Iterate over all the input tags in the document with an attribute data-autocomplete\r\n$.each($(\"input[data-autocomplete]\"), function (index, item) {\r\nvar entityName = $(item).attr('data-autocomplete');\r\nfetchSuggestionsFromServer('\/dataset\/' + entityName + '.js', entityName);\r\n});\r\n});<\/pre>\n4.2. Add click event handler for suggestions<\/h3>\n
\/\/Bind to click event of each suggestion displayed and populate the input tag with its value on click\r\n$(document).on(\"click\", \"a.list-group-item\", function (e) {\r\nvar code = e.code || e.which;\r\nvar target = e.target;\r\nif ( code !== 1 || !autocompleteWidget || !target) return;\r\n$(autocompleteWidget[\"wcg-autocomplete-input\"]).val($(target).text());\r\n$(autocompleteWidget).modal('hide');\r\n});\r\n<\/pre>\n4.3. Setup Input Tags<\/h3>\n
\/\/Setup the input tags to display suggestions by binding to their keyup event\r\nautocompleteSetup();\r\n<\/pre>\n
4.3.1. autocompleteSetup Function<\/h4>\n
function autocompleteSetup() {\r\n$(document).on(\"keyup\", \"input[data-autocomplete]\", function (event) {\r\nvar code = event.code || event.which;\r\n\r\n\/\/If the user presses the up arrow or down arrow key, move the selected suggestion as well\r\nif (code === 38) {\r\nvar next = $(\"a.list-group-item.active\").prev();\r\n\r\nif (next) {\r\n$(\"a.list-group-item.active\").removeClass(\"active\");\r\n$(next).addClass(\"active\");\r\n\r\n}\r\nreturn;\r\n\r\n} else if (code === 40) {\r\nvar prev = $(\"a.list-group-item.active\").next();\r\nif (prev) {\r\n$(\"a.list-group-item.active\").removeClass(\"active\");\r\n$(prev).addClass(\"active\");\r\n}\r\nreturn;\r\n}\r\n\r\n\/\/Display suggestions based on what the user has typed in so far\r\nif (code !== 13){\r\ndisplaySuggestions(getSuggestions($(this).val(), this), this);\r\n}\r\n\r\n\/\/If the user clicks the Enter key\r\nif (code === 13 && autocompleteWidget) {\r\n$(this).val($(\"a.list-group-item.active\").text());\r\n$(autocompleteWidget).modal('hide');\r\n}\r\n\r\n});\r\n};\r\n<\/pre>\n4.3.2. getSuggestions Function<\/h4>\n
function getSuggestions(searchTerm, element) {\r\nvar suggestionList = \"\";\r\nvar firstSuggestion = \"<a class='list-group-item active'>\";\r\nvar suggestion = \"<a class='list-group-item'>\";\r\n\r\nif (searchTerm === \"\") {\r\nreturn \"\";\r\n}\r\nvar list = $.grep(suggestions[$(element).attr('data-autocomplete')], function (s) {\r\nreturn s.toLowerCase().indexOf(searchTerm.toLowerCase()) === 0;\r\n});\r\n\r\n\r\n$.each(list.slice(0, (list.length > 5 ? 4 : list.length)), function (index, item) {\r\nif (index === 0) {\r\nsuggestionList = suggestionList + firstSuggestion + item + \"<\/a>\";\r\n} else {\r\nsuggestionList = suggestionList + suggestion + item + \"<\/a>\";\r\n}\r\n\r\n}, this);\r\n\r\nsuggestionList = suggestionList;\r\nreturn suggestionList;\r\n\r\n};\r\n<\/pre>\n4.3.3. Get Suggestions from Server<\/h4>\n
getJSON<\/code> function we request the suggestions list and store it in the suggestions object. The suggestions object stores each input tags suggestions in a separate key-value pair. The key is value of the data-autocomplete<\/code> attribute and value is the list of suggestions.<\/p>\nfunction fetchSuggestionsFromServer(suggestionsUrl, suggestionsFor) {\r\n\r\nif(suggestions.hasOwnProperty(suggestionsFor)){\r\nreturn;\r\n}\r\n$.getJSON(suggestionsUrl, function (response) {\r\nsuggestions[suggestionsFor] = response[suggestionsFor];\r\n});\r\n\r\n}\r\n<\/pre>\n4.3.4. Display Suggestions<\/h4>\n
function displaySuggestions(suggestions, element) {\r\n\r\nif (suggestions.length === 0) {\r\n\r\nif (autocompleteWidget) $(autocompleteWidget).modal('hide');\r\n\r\nreturn;\r\n}\r\nvar suggDiv;\r\nif (autocompleteWidget) {\r\nsuggDiv = $(autocompleteWidget);\r\n}\r\nelse {\r\nsuggDiv = $(\"<div id='wcg-modal' class='modal fade' data-backdrop='false'><\/div>\");\r\n}\r\n\r\nsuggDiv.html(suggestions);\r\n\r\nif (!autocompleteWidget) {\r\n$(document.body).append(suggDiv);\r\n\r\nautocompleteWidget = suggDiv;\r\n}\r\n$(autocompleteWidget).css({\r\nleft: $(element).position().left + \"px\",\r\ntop: $(element).position().top + $(element).height() + 8 + \"px\"\r\n});\r\nautocompleteWidget[\"wcg-autocomplete-input\"] = element;\r\n$(autocompleteWidget).modal('show');\r\n};\r\n<\/pre>\n5. Running the Project<\/h2>\n
project root>npm install<\/pre>\n
project root>node index.js<\/pre>\n
6. Output<\/h2>\n
http:\/\/localhost:3000\/<\/code> in a browser and you should see the following output.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/ProjectStructure-1.jpg\")
<\/a>7. Download the Source Code<\/h2>\n