Results 1 to 3 of 3

Thread: search on my web site

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Feb 2014
    Posts
    169

    search on my web site

    friends

    I want to add input type text
    and input type button

    used to search the content on my web page

    How can do that using javascript

    When the user clicks on the button

    I need JavaScript Code for searching text on my web site

  2. #2
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: search on my web site

    Hw is your content stored? Is it in a database? Or is it in static HTML files? It's going to be tough to find javascript code that will search your site since it is a client side script language and your site is sitting on the server. the easiest way is if your site content is in something like a database, then you can do a SQL query to get the results, and then have a results page... but if it's all static pages, it becomes a bit harder, and isn't something I've done.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3
    Lively Member
    Join Date
    Jan 2020
    Posts
    120

    Re: search on my web site

    Hello

    Please try this code To,search on my web site

    HTML Code:
    <!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 usefull.

    Thank you.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width