-
Notifications
You must be signed in to change notification settings - Fork 0
/
headerScript.js
99 lines (85 loc) · 2.6 KB
/
headerScript.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
///////////////
//variables
///////////////
const suggestions = ["هاست ویندوز", "هاست مک", "هاست لینوکس", "همه هاست ها"];
const searchInput = document.querySelector("#search-input");
const suggestBox = document.querySelector("#suggest-box");
const searchBtn = document.querySelector("#submit-search");
const btnSearch = document.querySelector("#search-btn");
////////////////
//eventlisteners
////////////////
eventListener();
function eventListener() {
searchInput.addEventListener("keyup", suggest);
searchInput.addEventListener("focus", showList);
suggestBox.addEventListener("click", fillInput);
btnSearch.addEventListener("click", showResult);
}
///////////////
//functions
///////////////
//function for suggest via search input
function suggest(e) {
//get the search input value
const searchText = e.target.value;
//initialize a empty array for suggestion
let suggestList = [];
//if the searchText is empty it will treated like false and condition wont be execute,otherwise go in it
if (searchText) {
suggestList = suggestions.filter(function (data) {
return data.toLowerCase().includes(searchText.toLowerCase());
});
}
//convert the the suggest list element to html tag template
suggestList = suggestList.map(function (data) {
return (data = `<li class="dropdown-item" style="cursor:pointer">${data}</li>`);
});
//show the suggestion using this item
showSuggestion(suggestList);
}
//function for show the suggestion
function showSuggestion(suggestList) {
if (suggestList.length == 0) {
hideList();
} else {
suggestBox.innerHTML = suggestList.join("");
showList();
}
}
//function for fill the search input with the selected item
function fillInput(e) {
const target = e.target;
if (target.classList.contains("dropdown-item")) {
searchInput.value = target.textContent;
hideList();
}
}
//function for hide the suggest list
function hideList() {
suggestBox.style.display = "none";
}
//function for show the suggest list
function showList() {
suggestBox.style.display = "block";
}
//function for go to page we want to go with search
function showResult() {
let searchText = searchInput.value;
switch (searchText) {
case "هاست ویندوز":
btnSearch.href = "./window.php";
break;
case "هاست مک":
btnSearch.href = "./mac.php";
break;
case "هاست لینوکس":
btnSearch.href = "./linux.php";
break;
case "همه هاست ها":
btnSearch.href = "./allProducts.php";
break;
default:
alert("نتیجه ای یافت نشد!");
}
}