diff --git a/html/js/script.js b/html/js/script.js index 19e617b..ec03ad1 100644 --- a/html/js/script.js +++ b/html/js/script.js @@ -4,45 +4,43 @@ const inputBox = searchWrapper.querySelector("input"); const suggBox = searchWrapper.querySelector(".autocom-box"); let linkTag = searchWrapper.querySelector("a"); let webLink; - -// if user press any key and release +// if user presses any key and releases inputBox.onkeyup = (e)=>{ - let userData = e.target.value; //user enetered data + let userData = e.target.value; // user entered data let emptyArray = []; if(userData){ emptyArray = suggestions.filter((data)=>{ - //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars + // filtering array value and user characters to lowercase and return only those words which start with user entered chars return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase()); }); + emptyArray = emptyArray.slice(0, 5); // Limit the suggestions to the top 5 emptyArray = emptyArray.map((data)=>{ // passing return data inside li tag return data = `
  • ${data}
  • `; }); - searchWrapper.classList.add("active"); //show autocomplete box + searchWrapper.classList.add("active"); // show autocomplete box showSuggestions(emptyArray); let allList = suggBox.querySelectorAll("li"); for (let i = 0; i < allList.length; i++) { - //adding onclick attribute in all li tag + // adding onclick attribute in all li tag allList[i].setAttribute("onclick", "select(this)"); } }else{ - searchWrapper.classList.remove("active"); //hide autocomplete box + searchWrapper.classList.remove("active"); // hide autocomplete box } } - function select(element){ let selectData = element.textContent; inputBox.value = selectData; searchWrapper.classList.remove("active"); } - function showSuggestions(list){ let listData; if(!list.length){ userValue = inputBox.value; listData = `
  • ${userValue}
  • `; }else{ - listData = list.join(''); + listData = list.join(''); } suggBox.innerHTML = listData; } \ No newline at end of file