Jump to content

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

Recommended Posts

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,

Link to comment
  • Replies 10
  • Views 2.7k
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.779b0112018ed8148b552281eb10e5d7.png

image.thumb.png.87c4f00f8f73f1578f546af8190a1fa3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Link to comment
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??

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

image.png.d97fa38ec6a3e52b2ee813e58614882e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.