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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...