JS Core: Task 1. Autocomplete.

gistfile1.js

/**
 * 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
    });
})();