Skip to content
This repository was archived by the owner on Dec 6, 2022. It is now read-only.

Commit 43a55d0

Browse files
Accio1Accio1
authored
Improve Search Functionality (#259)
-Adds a search dropdown to the list of Forum Helpers page -The search dropdown will display search suggestions based on what a user has typed into the search bar. -Only 5 suggestions will be shown at once, so typing in "a" will display the first 5 users with "a" in their name. -Case insensitive -Clicking on a suggestion will search for that user. -Checking the box that says "Only show matching results?" will cause all users who do not fit the current search to be hidden. -The choice between autocomplete and only show matching results is stored in localStorage. -Update the Privacy Policy to reflect changes to localStorage.
1 parent aceb76f commit 43a55d0

File tree

4 files changed

+119
-12
lines changed

4 files changed

+119
-12
lines changed

‎forumhelpers/FHP.js

+78-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
var membersList = [];
12
function getData(dataSet) {
2-
var grabDelay = 0
3+
var grabDelay = 0;
34
fetch("https://theforumhelpers.github.io/forumhelpers/"+dataSet+".json")
45
.then(response => response.json())
56
.then(data => {
67
document.getElementById(dataSet+"Number").innerHTML = data.length;
78
for (j = 0; j < data.length; j++) {
89
var name = data[j].name;
10+
membersList.push(name);
911
var id = data[j].id;
1012
var bio = data[j].bio;
1113
var section = document.getElementById(dataSet+"List").innerHTML;
@@ -17,8 +19,9 @@ function getData(dataSet) {
1719
<p class="profileBio">${bio}</p>
1820
</div>
1921
<p class="ocularStatusBox" id="${name}Ocular" title="Ocular Status"><span class="ocularStatus" id="${name}Status">Loading Status...</span></p>
20-
</div>
21-
<hr>`;
22+
<br>
23+
<hr>
24+
</div>`;
2225
document.getElementById(dataSet+"List").innerHTML = section + addition;
2326
if (j == data.length-1 && dataSet != "curators") {
2427
getData("curators");
@@ -66,8 +69,78 @@ function getCount(name) {
6669

6770

6871
//Search for a user
69-
var searchBar = document.getElementById("searchBar")
70-
var searchButton = document.getElementById("searchButton")
72+
var searchBar = document.getElementById("searchBar");
73+
var searchButton = document.getElementById("searchButton");
74+
var complexSearch
75+
var storedSearchOption = localStorage.getItem("complexSearch")
76+
if (storedSearchOption == false || storedSearchOption == null) {
77+
document.getElementById("searchCheckbox").checked = false;
78+
complexSearch = 0;
79+
}
80+
else {
81+
document.getElementById("searchCheckbox").checked = true;
82+
complexSearch = 1;
83+
}
84+
85+
var searchOptions = [];
86+
function updateUserChoice() {
87+
document.getElementById("searchOptions").innerHTML = "";
88+
searchOptions = [];
89+
var searchedLetters = searchBar.value;
90+
if (complexSearch == 0) {
91+
for (k = 0; k < membersList.length; k++) {
92+
if (membersList[k].toUpperCase().includes(searchedLetters.toUpperCase()) && searchOptions.length != 5 && searchedLetters != "") {
93+
searchOptions.push(membersList[k]);
94+
}
95+
document.getElementById(membersList[k].toUpperCase()).style.display = "block";
96+
}
97+
98+
for (k = 0; k < searchOptions.length; k++) {
99+
var searchOptionBox = document.createElement("DIV");
100+
searchOptionBox.innerText = searchOptions[k];
101+
searchOptionBox.setAttribute("class", "searchOption");
102+
searchOptionBox.setAttribute("onclick", `autoFill("${searchOptions[k]}")`);
103+
document.getElementById("searchOptions").appendChild(searchOptionBox);
104+
}
105+
}
106+
else if (complexSearch == 1) {
107+
for (k = 0; k < membersList.length; k++) {
108+
if (membersList[k].toUpperCase().includes(searchedLetters.toUpperCase())) {
109+
searchOptions.push(membersList[k].toUpperCase());
110+
}
111+
}
112+
113+
var profileContainers = document.getElementById("forumHelpersList").getElementsByClassName("profileContainer");
114+
for (k = 0; k < profileContainers.length; k++) {
115+
if (searchOptions.includes(profileContainers[k].id) == false) {
116+
profileContainers[k].style.display = "none";
117+
}
118+
else {
119+
profileContainers[k].style.display = "block";
120+
}
121+
}
122+
}
123+
}
124+
125+
function autoFill(fillValue) {
126+
searchBar.value = fillValue;
127+
checkUser();
128+
updateUserChoice();
129+
searchUser();
130+
}
131+
132+
function hideMatchingResults() {
133+
var searchCheckbox = document.getElementById("searchCheckbox");
134+
if (searchCheckbox.checked == true) {
135+
complexSearch = 1;
136+
localStorage.setItem("complexSearch", true);
137+
}
138+
else {
139+
complexSearch = 0;
140+
localStorage.setItem("complexSearch", false);
141+
}
142+
updateUserChoice();
143+
}
71144

72145
function checkUser() {
73146
var searchedUser = searchBar.value.toUpperCase();

‎forumhelpers/index.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -43,20 +43,26 @@ <h3 class="forumHelpersHeader">Below is a list of current Forum Helpers, along w
4343

4444
<div class="searchBlock">
4545
<h3>Search for a Forum Helper</h3>
46-
<input type="text" id="searchBar" placeholder="Username" oninput="checkUser()">
46+
<input type="text" id="searchBar" placeholder="Username" oninput="checkUser(), updateUserChoice()" onkeydown="if (event.keyCode == 13); document.getElementById('searchButton').click()">
4747
<button id="searchButton" onclick="searchUser()" disabled title="Invalid Username">Search</button>
48+
<div id="searchOptions"></div>
49+
<br>
50+
<br>
51+
<input type="checkbox" id="searchCheckbox" onchange="hideMatchingResults()">
52+
<label for="searchCheckbox"> Only show matching results?</label>
4853
</div>
4954

5055
<div class="forumHelpersNavBlock">
5156
<h3><a href="#top" class="FHULink">Top</a></h3>
5257
<h3><a href="#managers" class="FHULink">Managers</a></h3>
5358
<h3><a href="#curators" class="FHULink">Curators</a></h3>
5459
</div>
55-
56-
<h1 class="forumHelpersSubheaders" id="managers">Managers</h1>
57-
<div id="managersList"></div>
58-
<h1 class="forumHelpersSubheaders" id="curators">Curators</h1>
59-
<div id="curatorsList"></div>
60+
<div class="forumHelpersList" id="forumHelpersList">
61+
<h1 class="forumHelpersSubheaders" id="managers">Managers</h1>
62+
<div id="managersList"></div>
63+
<h1 class="forumHelpersSubheaders" id="curators">Curators</h1>
64+
<div id="curatorsList"></div>
65+
</div>
6066
</div>
6167

6268
<div class="privacyWarning" id="privacyWarning"></div>

‎privacy/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h3>Other</h3>
3737
<ul>
3838
<li>Aside from Google Analytics, this site also stores two cookies on your computer which save whether or not you have agreed to the use of Google Analytics, and the date that you agreed.</li><br>
3939
<li>This cookie expires each month, so you will have to re-accept the use of Google Analytics when you visit our site in a month that you have not yet accepted.</li><br>
40-
<li>We also store one cookie which does not expire that stores your theme choice.</li><br>
40+
<li>We also store one cookie which does not expire that stores your theme choice, as well as one that stores your search options.</li><br>
4141
<li>Questions? Feel free to contact us by <a href="https://github.com/theforumhelpers/theforumhelpers.github.io/discussions/new?category=q-a">opening a discussion</a> on our GitHub repository.</li>
4242
</ul>
4343
</div>

‎resources/stylesheet.css

+28
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ hr {
240240
#searchBar {
241241
padding: 10px;
242242
width: 40%;
243+
min-width: 175px;
243244
height: 50px;
244245
border-radius: 10px 0px 0px 10px;
245246
border: 4px solid black;
@@ -273,6 +274,33 @@ hr {
273274
background-color: grey;
274275
}
275276

277+
#searchOptions {
278+
border-radius: 10px;
279+
margin-top: 2px;
280+
width: 40%;
281+
min-width: 175px;
282+
box-sizing: border-box;
283+
background-color: var(--secondary);
284+
color: var(--textSecondary);
285+
box-shadow: 1px 1px 10px #363636;
286+
}
287+
288+
#searchOptions:empty {
289+
display: none;
290+
}
291+
292+
.searchOption {
293+
padding: 5px;
294+
width: 100%;
295+
box-sizing: border-box;
296+
border-radius: 10px;
297+
}
298+
299+
.searchOption:hover {
300+
cursor: pointer;
301+
background-color: var(--secondaryHover);
302+
}
303+
276304
.forumHelpersHeader {
277305
text-align: center;
278306
}

0 commit comments

Comments
 (0)