Search by member information

Hi everyone,

I'm wanna create a page that could display information of current members with information such as title, name, e.t.c.. Therefore, user could using "search bar" to search for a specific member. However, Squarespace existing features only support us to search on specific pages like "event" or "blog". Thus, I couldn't figure out which steps I should follow to do it.

Please help to refer to the page below for better understanding.

https://cew.org.au/about-us/our-members/search-for-a-cew-member/ 

Thanks.

Just created a demo (quick demo so it is ugly) 😅

Like this site? https://cylinder-mackerel-pnk5.squarespace.com/search-page?password=abc

(built on Bedford Template)

Password: abc

--

Yes. It is exactly what I'm looking for. How can I do that?

13 hours ago, JustinNguyen said:

Yes. It is exactly what I'm looking for. How can I do that?

There are 2 ways to do this.
Method 1 (code below, free).
Use Code Block
Pros: Free
Cons: Difficult to edit, requires a bit of CSS to make the layout look better

Method 2. (time-consuming to check, and not free, if you are interested can contact via the link in my signature).
Use Image Blocks + JavaScript
Pros: Paid
Cons: Easy to edit you only need to work with Image Block

Code for method 1

Insert Code Block and add this code (the code has JavaScript, so you need a Business Plan or higher)

<h2>Search Page - @tuanphan</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Enter any name to search" title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a><img src="https://cew.org.au/wp-content/uploads/2019/12/Louise-Adams.jpg"/></li>
  <li><a href="#">Agnes</a><img src="https://cew.org.au/wp-content/uploads/2019/12/Catherine-Allfrey-.jpg"/></li>

  <li><a href="#">Billy</a><img src="https://cew.org.au/wp-content/uploads/2016/11/CEW-Member-Website-Profile-Adamson-Frances-photo.jpg"/></li>
  <li><a href="#">Bob</a><img src="https://cew.org.au/wp-content/uploads/2016/07/Kate-Aitken.gif"/></li>

  <li><a href="#">Calvin</a><img src="https://cew.org.au/wp-content/uploads/2016/08/Patty-Akopiantz-CEW-Member.jpg"/></li>
  <li><a href="#">Christina</a><img src="https://cew.org.au/wp-content/uploads/2017/05/Jane-Allen.jpg"/></li>
  <li><a href="#">Cindy</a><img src="https://cew.org.au/wp-content/uploads/2016/07/Yasmin-Allen.jpg"/></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>