Need help with search bar

discount85 · June 8, 2020

Hi everyone, hope you're safe and well.

I'm looking for some help regarding how to make my website search bar work by searching my site.

About my website

My website is a directory, similar to Yell.com

I'm using an HTML template (U-Listing).

I have some coding experience but basic knowledge. However, I'm capable of copying instruction.

When someone types in the search bar 'Builder', I need it to display all builders on my site. Etc etc

Can someone point me in the right direction OR would you recommend hiring a programmer?

Thanks

dsonesuk · June 8, 2020

Do you have local server with MYSQL or MSSQL databases, that is required before you can start. As you need to enter a search criteria that will be used to search database table for row containing profession of "builder" then bring up those record to be displayed on a page using server script language of PHP, ASP for example.

Makwana Prahlad · July 9, 2020

Hello,@discount85

Please try this code,To Need help with search bar

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  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>
</head>
<body>

<h2>My Phonebook</h2>

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

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></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>

</body>
</html>

I hope this code will be useful.

Thank you.

Sign In

Need help with search bar

Recommended Posts

discount85

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity