Jump to content

Need help with search bar


Recommended Posts

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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...


Please try this code,To Need help with search bar

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

<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>

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";


I hope this code will be useful.

Thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...