Created
October 21, 2013 07:10
-
-
Save dzenkovich/7079765 to your computer and use it in GitHub Desktop.
JS Core: Task 1. Autocomplete.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* This self-invoking anonymous function contains the json object with attendees' names, | |
* the helper function for adding event listeners and the Autocomplete constructor. | |
* It encloses variables and functions in it's scope and helps us keep them out of Global | |
* This is the most simple scenario of Module pattern. | |
*/ | |
(function(){ | |
//json object | |
var attendeesJSON = { | |
"Attendees": [ | |
"Aliaksandr Palubinski", | |
"Dzianis Skliar", | |
"Pavel Karpovich", | |
"Kirill Malets", | |
"Maria Putyrskaya", | |
"Tatsiana Hlebik", | |
"Nikolay Zhgirovsky", | |
"Aliaksandr Kurash", | |
"Alexander Zhuk", | |
"Kanstantsin Babichau", | |
"Anton Sharapa", | |
"Anastasiya Samotiya", | |
"Dzianis Kryvashei", | |
"Siarhei Mikulich", | |
"Yauhen Tsikhan", | |
"Pavel Martynau", | |
"Aliaksandr Hudkou", | |
"Yulia Douha", | |
"Volha Bainova", | |
"Kseniya Smirnova", | |
"Yauheni Pas", | |
"Yury Tarasevich", | |
"Alena Rubanik", | |
"Nastassia Tayanouskaya", | |
"Yury Solovey" | |
] | |
}; | |
/** | |
* helper function to create event listeners | |
* | |
* @param element DOM object | |
* @param event DOM event object | |
* @param func Function callback | |
*/ | |
function addEvents(element, event, func){ | |
if(element.addEventListener) | |
{ | |
element.addEventListener(event, func, false); | |
} | |
else if(element.attachEvent) | |
{ | |
element.attachEvent('on' + event, func); //IE browser | |
} | |
} | |
/** | |
* Autocomplete constructor function. Accepts input element and list of attendies and creates | |
* autocomplete list functionality to the input. | |
* | |
* @param inputField DOM object | |
* @constructor | |
*/ | |
function Autocomplete(inputField){ | |
/** | |
* Reads the entered value from the input field, then loops through the list of the attendees | |
* to check if the entered chars match the value of the first or the last name and returns the array of | |
* the matched names | |
* | |
* @returns {Array} Matched names | |
* @private | |
*/ | |
function _search() { | |
var matchedAttendees = [], // the array of the matched attendees | |
arrayElement, // the value of the element in the array | |
pattern; // regular expression based on the entered value | |
//check if the length of the value is not empty (empty string "" converts to the boolean false) | |
if (inputField.value) { | |
// loop through the list of attendees | |
for (var attendee in attendeesJSON.Attendees) { | |
//flags: i - case-insensitive; g - global match (finds all matches) | |
//\\b - regexp metacharacter to match a word | |
pattern = new RegExp('\\b' + inputField.value, 'gi'); | |
arrayElement = attendeesJSON.Attendees[attendee]; | |
//Check if the element matches the regular expression. | |
//If yes, the element is added to the array of matched elements | |
if (pattern.test(arrayElement)) { | |
matchedAttendees.push(arrayElement); | |
}; | |
} | |
} | |
return matchedAttendees; | |
} | |
/** | |
* Creates and shows the list of the matched attendees | |
* | |
* @private | |
*/ | |
function _showMatchedElements() { | |
var resultList = _search(), //get the array of the matched elements | |
listView = document.querySelectorAll('.searchResults')[0], //get the 1st DOM element with the class "searchResults" | |
temp =''; //the variable which contains the string of reluts before inserting it into DOM | |
if (resultList && resultList.length) { //check if the array is not empty | |
for (var i = 0, len = resultList.length; i < len; i++) { | |
temp += '<li>' + resultList[i] + '</li>'; | |
} | |
listView.innerHTML = temp; //inserting elements into DOM | |
listView.style.display = 'block'; // make the element visible | |
} | |
else { | |
listView.style.display = 'none'; // make the element invisble | |
} | |
} | |
/** | |
* Hides the list of matched attendees | |
* | |
* @private | |
*/ | |
function _hideMatchedElements (){ | |
var listView = document.querySelectorAll('.searchResults')[0]; | |
listView.style.display = 'none'; | |
} | |
/** | |
* Initialize the autocomplete. | |
* runs when a new instance of Autocomplete class is created | |
* | |
* @private | |
*/ | |
function _init() { | |
addEvents(inputField, 'keyup', _showMatchedElements); | |
addEvents(inputField, 'blur', _hideMatchedElements); | |
} | |
_init(); | |
} | |
addEvents(window, 'load', function(){ | |
var searchField = document.getElementById('attendeesSearchField'), //get the search input | |
attendeesAutocomplete = new Autocomplete(searchField); //create new Autocomplete instance | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment