Create a Search Bar that can search a list, rather than a collection.

Hi.

The link associated with this post is currently not linked to my site. I am rebuilding the home page, which I will then transition into my site once I feel it is complete. The page is not locked.

I have customized the look of the search bar with CSS. However, I can't make it search the type of information I want. I am not building a 'product' or a 'portfolio' or some other collection. Instead, I am building a site that needs to allow a user to search a location.

I want to start by making a list of the 50 united states by name. In time, I will even make it possible for someone to search by metropolitan area, and then eventually by city and neighborhood. How do I make the search so it can point to these locations from a list view (or even a db)? You can use the Zillow homepage search bar as a reference for what I am hoping to do (but my version can be a 'dumber' simpler version to begin).

Thanks,

Hi,

How will you create list of 50 united states? Text Block, Code Block, Blog or?

If you use a simple list with Code Block, we can convert this code: https://www.w3schools.com/howto/howto_js_filter_lists.asp

Thank you. This was what I needed. I appreciate it.

The list view stays open. I added some custom css using ChatGPT (as I don't know css, html, or js myself). But whenever I would get the list to disappear and appear only on my click into the search bar, I couldn't get the list click to navigate to the URL I defined in the Code block. But when I do not adjust the code, and use exactly as w3schools showed, then it will navigate to the URL.

What code to I need to add so that I can get the list view to hide unless I actually click on the search bar, but still honor the URL redirects from the code block?

BTW - this is now the home page. so url changed from above: hoahomehub.com

On 9/24/2023 at 4:23 AM, Jeffrey_Leavitt said:

The list view stays open. I added some custom css using ChatGPT (as I don't know css, html, or js myself). But whenever I would get the list to disappear and appear only on my click into the search bar, I couldn't get the list click to navigate to the URL I defined in the Code block. But when I do not adjust the code, and use exactly as w3schools showed, then it will navigate to the URL.

What code to I need to add so that I can get the list view to hide unless I actually click on the search bar, but still honor the URL redirects from the code block?

You mean

Initial: Hide all list, show search bar only

When click/or enter in Search bar >> Show result + Make result item clickable to new line??

Yes. You are correct in your understanding.

You can edit page where you want to do this > Add a Code Block > paste this code

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="https://google.com">Adele</a></li>
  <li><a href="https://google.co">Agnes</a></li>

  <li><a href="https://google.co">Billy</a></li>
  <li><a href="https://google.co">Bob</a></li>

  <li><a href="https://google.co">Calvin</a></li>
  <li><a href="https://google.co">Christina</a></li>
  <li><a href="https://google.co">Cindy</a></li>
</ul>

<style>
#myUL {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
<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>

Adjust text + url here

I appreciate your help. I removed the custom css and code injection you had previously given. I added this code to the code block. It seems to be responding in the same way it was previoulsy, meaning that the boxes showing "Phoenix Metro" and "Raleigh Metro" are always showing, and do not hide until I click into the search box.

On 10/1/2023 at 11:51 PM, Jeffrey_Leavitt said:

I appreciate your help. I removed the custom css and code injection you had previously given. I added this code to the code block. It seems to be responding in the same way it was previoulsy, meaning that the boxes showing "Phoenix Metro" and "Raleigh Metro" are always showing, and do not hide until I click into the search box.

Can you share link to page where you added it? I will test some other code

Last night I reverted it back to the w3schools list view that you originally shared, because the code block was not allowing me to adjust the search bar in a way that looked good on mobile view. 

Is there an alternative way I can use the w3schools approach, but perhaps add additional custom css, such as #myUL { /* Other CSS properties */ display: none; /* Hide the list by default */ }, but then adjust the JS in the Header of the Code Injection to allow the list to appear when the box is clicked?

Again, I appreciate your help. I have sent you coffee money for your assistance.