How to make search bar which search value from database example

-

Like Above search.


Step 1.
Make HTML file as follow.


<html>

  <head>

    <title>Ajax Search Box using PHP and MySQL</title>

    <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script -->

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>





    <!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script -->



    <script src="typeahead.min.js"></script>

    <script>

    $(document).ready(function(){

   $('input.typeahead').typeahead({

        name: 'typeahead',

remote: 'search.php?query=%QUERY',




       // limit : 10

    });

/*var search = new Bloodhound({

    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('sear'),

    queryTokenizer: Bloodhound.tokenizers.whitespace,

    limit: 10,

    remote: {

        url: 'search.php?key=%QUERY',



        filter: function(list) {

            return $.map(list, function(search) {

                return {

                    name: sear

                };

            });


        }

    }

});*/

});

    </script>

    <style type="text/css">

.bs-example{

font-family: sans-serif;

position: relative;

margin: 50px;

}

.typeahead, .tt-query, .tt-hint {

border: 2px solid #CCCCCC;

border-radius: 8px;

font-size: 24px;

height: 30px;

line-height: 30px;

outline: medium none;

padding: 8px 12px;

width: 396px;

}

.typeahead {

background-color: #FFFFFF;

}

.typeahead:focus {

border: 2px solid #0097CF;

}

.tt-query {

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

}

.tt-hint {

color: #999999;

}

.tt-dropdown-menu {

background-color: #FFFFFF;

border: 1px solid rgba(0, 0, 0, 0.2);

border-radius: 8px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

margin-top: 12px;

padding: 8px 0;

width: 422px;

}

.tt-suggestion {

font-size: 24px;

line-height: 24px;

padding: 3px 20px;

}

.tt-suggestion.tt-is-under-cursor {

background-color: #0097CF;

color: #FFFFFF;

}

.tt-suggestion p {

margin: 0;

}

</style>

  </head>

  <body>

    <div class="row">

      

  <div class=".col-md-6">

    <div class="panel panel-default">

    <div class="bs-example">

        <input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">

    </div>

  </div>

  </div>

  </div>

  </body>

</html>


Step 2- PHP file search from  database.(before that database with user table should exsit.)


<?php

    $key=$_GET['query'];

    $array = array();

   // $con=mysql_connect("localhost","root","");

  //  $db=mysql_select_db("demos",$con);

  

  include_once('../include/config.php');

    $query=mysql_query("select * from user where fname LIKE '{$key}%' or  zkey like '{$key}%' or mobile  like '{$key}%' or email  like '{$key}%' ");

    while($row=mysql_fetch_assoc($query))

    {

      $array[] = $row['fname'].' '.$row['zkey'];

    }

if ($array)


{

    echo json_encode($array);

}

else

{

echo json_encode('Not found');

}

?>

step 3: typeahead.min.js  and bootstrap files are  required to run this


Comments

Post a Comment

Popular posts from this blog

What is HTML? Complete Beginner’s Guide (with Examples)

-
Image
What is HTML? Complete Beginner’s Guide (with Examples) Are you new to web development and want to learn how websites are built? Then, understanding HTML is the first step. In this guide, we will explain HTML in simple terms, provide examples, and show you how to start creating your own web pages. Table of Contents What is HTML? Why is HTML Important? Basic Structure of an HTML Document HTML Tags and Elements Examples of HTML Code How to Create Your First Web Page Tips for Learning HTML Conclusion 1. What is HTML? HTML (HyperText Markup Language) is the standard language used to create web pages. It is not a programming language—it’s a markup language that tells web browsers how to display content. With HTML, you can: Add text, headings, and paragraphs Insert images, videos, and links Create tables, lists, and forms Build structured websites 2. Why is HTML Important? HTML is the backbone of every website. Without HTML, the internet as ...
Read more

HTML Forms — Input, Label, Button & Validation (Explained Like a Teacher With Examples)

-
Image
HTML Forms — Input, Label, Button & Validation  When you browse any website, you often fill forms — login forms, search forms, payment forms, enquiry forms, registration forms, and many more. All these are created using HTML Forms . As your teacher, I will help you understand this topic in the simplest way. By the end of this lesson, you will be able to: Create forms Use labels, inputs, and buttons Add validation Build a clean and professional form Let’s learn step-by-step. What is an HTML Form?  An HTML form is like a digital notebook page where we ask the user to write information. If we need the user’s: Name Email Age Password Message …then a form helps us collect that information. HTML form uses the <form> tag: <form action="submit.php" method="POST"> <!-- form fields --> </form> Important attributes action → Where the data will go method → How the data will be sent POST → Sa...
Read more

Difference Between HTML and HTML5 (2025 Explained) | Features, Advantages & Comparison Table

-
Image
Introduction If you want to become a web developer in 2025, the first thing you must understand is the difference between HTML and HTML5 . Both are markup languages used to create web pages, but HTML5 is a major upgrade with advanced features like audio/video support, semantic tags, offline storage, and faster performance. This article explains everything in easy language, with examples and a full comparison table — perfect for students, beginners, and bloggers. What is HTML? HTML stands for HyperText Markup Language . It is used to structure content on a webpage using tags like: <html> <head> <body> <p> <img> <table> HTML versions before HTML5 depended heavily on external plugins like Flash or Silverlight for audio, video, and animations. What is HTML5? HTML5 is the latest version of HTML , introduced to support modern web needs like: multimedia (audio & video) animations games responsive websites ...
Read more