Crescent Credit Union League Richard Coates is the IT manager at the Crescent Credit Union League (CCUL), an advocacy group for credit unions providing a political voice for credit unions and offering education and training for CCUL members. Richard wants you to work on the CCUL’s staff directory page for its website. He wants users to be able to search the directory, retrieving contact information for specific employees at CCUL. The staff directory is stored in an object literal named "staff" that contains a single object named "directory". The directory object contains an array of objects that displays each employee's id, first and last name, position, department, e-mail address, phone number, and image file. Your job is to create a search tool that searches the staff object directory array for employees whose last name, position, and/or department matches the user's search conditions. A preview of the page you will create is shown in Figure 14-48. Setup Use your editor to open the cc_staff.html and cc_staff.js files. Enter your name and the date in the comment section of each file. Linking JS File Go to the cc_staff.html file in your editor. Within the document head add script elements for the cc_data.js and cc_staff.js files in that order. Load the files asynchronously. Take some time to study the contents of the file. Use your editor to open the cc_data.js file and study the data stored in the staff object to become familiar with its contents and structure. Close the file, but do not make any changes to the document. Go to the cc_staff.js file in your editor. Richard has already created a constructor function for the class of employee objects storing each employee's id, name, department, position, e-mail, phone, and photo. He has also already created an object literal named searchResult that will be used to store the search results in an employees array. Event Listeners Go to the event listener for the click event. This event listener will run the code that displays the search results in a staff table. Within this event listener, add the code specified in the remainder of this lab. Richard has added the removeChildren() method to the prototype of the HTMLElement object which removes all children from a DOM element. Apply this method to the tableBody variable to remove all table rows that might still be present in the staff table from previous searches. Erase previous search results by setting the employees array of the searchResult object to the empty array []. Next, you will write the code that returns the employee records that match search conditions set by the user. Apply the forEach() array method to loop through the contents of the directory array in the staff object. For each employee object in the directory array, run an anonymous function with the parameter, record, that represents each record in the array. Add the commands specified in the JavaScript Commands section of the next step to the anonymous function within the forEach() array method. JavaScript Commands Create the nameSearch variable equal to the value entered in the nameSearch input box. Users can search for names in three ways: Matching an employee's last name if it contains the text string specified in nameSearch Matching an employee's last name if it begins with the nameSearch text string Matching an employee's last name only if it exactly matches the nameSearch text string. Richard has supplied you with code to add the selectedValue() method to the prototype of the HTMLSelectElement object class in order to return the value of the selected option in any selection list. Apply the selectedValue() method to the nameSearchType selection list to return the option selected by the user, storing the value in the nameSearchType variable. Create a switch-case structure for the following possible values of the nameSearchType variable: If nameSearchType equals "contains", use the new RegExp() constructor to create a regular expression object named nameRegExp containing the regular expression nameSearch where nameSearch is the value of the nameSearch variable. Include the "i" flag with the regular expression object so that the regular expression matches lower or uppercase characters. If nameSearchType equals "beginsWith", set nameRegExp object to the regular expression ^nameSearch, once again with the "i" flag. If nameSearchType equals "exact", set nameRegExp object to the regular expression ^nameSearch$ with the "i" flag to allow for upper- and lower-case matches. (There is a second part to this that I sent in a separately.)