Autocomplete search using php, mysql and ajax

We know what is autocomplete in input type, that is make some predefined entered texts come under the input type box, while focusing on the input type, similarly we are searching some content from mysql database, this actually see image style search concept to suggest some data for select before we get the exact search, for that we are using this kind of search, and this is very simple to make search in php, mysql with ajax and jquery. let see it in brief.

 

as like you see in the above image, the search will be comes like that by using php, mysql and ajax with jquery.

DATABASE DETAILS

database name-->phpmvcbug

table name --> autocomplete

column names --> id, name, email

DB.PHP

<?php
$connection = mysql_connect('localhost','root','') or die(mysql_error());
$database = mysql_select_db('phpmvcbug') or die(mysql_error());
?>

the above is database file.

INDEX.PHP

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" /> 

 Ex:arunkumar, shanmu, vicky<br /> 
<div id="result"></div>
</div>

just give this input type only in index page with AJAX. you can see the ajax coding below here that is also comes in index page

AJAX

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>

the above all for make action in SEARCH page with out refreshing the page.

SEARCH.PHP

<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name 

                      like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="author.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" />

 <span class="name"><?php echo $final_username; ?></span>&nbsp;<br/> 

<?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>

that's it. as like the usual fetch from database with like and here we are just adding str_ireplace, that's it. and other thinks are as like we know, that is very simple one. let's try this. and each of our entering text that wil comes as in strong letter.

 

If you have any problem regarding this tutorial configuration please feel free to comment we love to answer your queries.

Choose state and city based on country using Jquery

It’s  for choosing state and city based on choosing the country, when we choose a country, in a second select option field will show the states, what are all presents in the country, that is the concept. Let see how it works.

lwhen we choose the country, we can automatically show, what are the state are the in the country, for that we are using this code and script.

Script

<script type="text/javascript">
var country_arr = new Array("Afghanistan", "India", "USA", "Vietnam");

var s_a = new Array();
s_a[0]="";
s_a[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|

       Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|

       Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
s_a[2]="Andhra Pradesh|Arunachal Pradesh|Assam|Bihar|Chhattisgarh|Goa|Gujarat|Haryana|

       Himachal Pradesh|Jammu and Kashmir|Jharkhand|Karnataka|Kerala|Madhya Pradesh|

       Maharashtra|Manipur|Meghalaya|Mizoram|Nagaland|Odisha(Orissa)|Punjab|Rajasthan|

       Sikkim|Tamil Nadu|Tripura|Uttar Pradesh|Uttarakhand|West Bengal";
s_a[3]="Alabama|Alaska|Arizona|Arkansas|California|Colorado|Connecticut|Delaware|

        Florida|Georgia|Hawaii|Idaho|Illinois|Indiana|Iowa|ansas|Kentucky|Louisiana|

        Maine|Maryland|Massachusetts|Michigan|Minnesota|Mississippi|Missouri|Montana|

        Nebraska|Nevada|New Hampshire|New Jersey|New Mexico|New York|North Carolina|

        North Dakota|Ohio|Oklahoma|Oregon|Pennsylvania|Rhode Island|South Carolina|

        South Dakota|Tennessee|Texas|Utah|Vermont|Virginia|Washington|West Virginia|

        Wisconsin|Wyoming";

s_a[4]="Ba Ria|Bạc Liêu|Bắc Giang|Bắc Ninh|Bảo Lộc|Biên Hòa|Bến Tre|Buôn Ma Thuột|

       Cà Mau|Cam Pha|Cao Lãnh|Đà Lạt|Điện Biên Phủ|Đông Hà|Đồng Hới|Hà Tĩnh|Hạ Long|

       Hải Dương|Hòa Bình|Hội An|Huế|Hưng Yên|Kon Tum|Lạng Sơn|Lào Cai|Long Xuyên|

       Móng Cái|Mỹ Tho|Nam Định|Ninh Bình|Nha Trang|Cam Ranh|Phan Rang-Tháp Chàm|

       Phan Thiết|Phủ Lý|Pleiku|Quảng Ngãi|Quy Nhơn|Rạch Giá|Sóc Trăng|Sơn La|Tam Kỳ|

       Tân An|Thái Bình|Thái Nguyên|Thanh Hóa|Trà Vinh|Tuy Hòa|Tuyen Quang|Uong Bi| 

      Việt Trì|Vinh|Vĩnh Yên|Vĩnh Lon|Vũng Tàu|Yên Bái";

function print_country(country){
    //given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country);
    option_str.length=0;
    option_str.options[0] = new Option('Select Country','');
    option_str.selectedIndex = 0;
    for (var i=0; i<country_arr.length; i++) {
    option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
    }
}

function print_state(state, selectedIndex){
    var option_str = document.getElementById(state);
    option_str.length=0;    // Fixed by Julian Woods
    option_str.options[0] = new Option('Select State','');
    option_str.selectedIndex = 0;
    var state_arr = s_a[selectedIndex].split("|");
    for (var i=0; i<state_arr.length; i++) {
    option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
    }
}

 </script>

  the above script is sample script of select state based on country, when we select the country, that will show the second dropdown select box will show the states, the above is script,

Program

Select the Country :
<select onchange="print_state('state',this.selectedIndex);" id="country" name ="country"> 

</select>
<br />
State in the above country :
<select name ="state" id ="state"></select>
<script language="javascript">print_country("country");</script>

that's it, enjoy with the demo. 

If you have any problem regarding this tutorial configuration please feel free to comment we love to answer your queries.

Simple Pagination with loading effect using Qjuery, PHP and MySql

Simple Pagination is the matter of showing limited data in a particular page, here i'm using Jquery, php, mysql. if we have more number of data in a single page, we just make it to show a particular data in a page. for that we are using this pagination. just know how the pagination works and know some of the details about pagination and how to make it without page refreshing, let see the tutorial.

 

 in this pagination system, we just use three things Jquery,PHP, and mysql database, and here we see what are all needed for this pagination system.

1. index.php

2. pagination.php

3. db.php

4. indexscript

5. Jquery.min.js

   the above all files are needed to run this pagination. 
   database name -->phpmvcbug
   table name --> pagination
   column names --> id, name, designation, place

   DB.PHP

   <?php
   $mysql_hostname = "localhost";
   $mysql_user = "root";
   $mysql_password = "";
   $mysql_database = "phpmvcbug";
   $con = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
   mysql_select_db($mysql_database, $con) or die("Opps some thing went wrong");
   ?>
   

   
   

   PAGINATION.PHP

   include the database file, and assign the number of data have to view in the page. then follow the below code.

   <?php
   include('db.php');
   $per_page = 4; 
   if($_GET)
   {
   $page=$_GET['page'];
   }
   $start = ($page-1)*$per_page;
   $select_table = "select * from pagination order by id limit $start,$per_page";
   $variable = mysql_query($select_table);
   ?>
       <table width="800px">
           <?php
           $i=1;
           while($row = mysql_fetch_array($variable))
           {
               $name=$row['name'];
               $design=$row['designation'];
               $place=$row['place'];
           ?>
           <tr>
           <td style="color:#999;"><?php echo $i++; ?></td>
           <td><?php echo $name; ?></td>
           <td><?php echo $design; ?></td>
           <td><?php echo $place; ?></td></tr>
           <?php
           }
           ?>
   </table>
   

   SCRIPT

   the script is comes under in the page of index or where you need it. just call the script with as what have you assigned in the page, make it for as the coding is given by you.

   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
       function Display_Load()
       {
           $("#load").fadeIn(1000,0);
           $("#load").html("<img src='load.gif' />");
       }
       function Hide_Load()
       {
           $("#load").fadeOut('slow');
       };
       $("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
       Display_Load();
       $("#content").load("pagination.php?page=1", Hide_Load());
       $("#paginate li").click(function(){
           Display_Load();
           $("#paginate li")
           .css({'border' : 'solid #193d81 1px'})
           .css({'color' : '#0063DC'});
           $(this)
           .css({'color' : '#FF0084'})
           .css({'border' : 'none'});
           var pageNum = this.id;
           $("#content").load("pagination.php?page=" + pageNum, Hide_Load());
       });
   });
   </script>

   
   

   INDEX.PHP

   first add the database file, and assign the number, how many data have to view in page. then select the table to fetch the data.

   <?php
   include('db.php');
   $per_page = 4; 
   $select_table = "select * from pagination";
   $variable = mysql_query($select_table);
   $count = mysql_num_rows($variable);
   $pages = ceil($count/$per_page)
   ?>
   
   
   <body>
   
   <div id="content" ></div>
   <div class="link" align="center">
               <ul id="paginate">
                   <?php
                     for($i=1; $i<=$pages; $i++)
                   {
                       echo '<li id="'.$i.'">'.$i.'</li>';
                   }
                   ?>
               </ul>   
   </div>
   <div style="clear:both"></div>
   <div id="load" align="center" ></div>
   
   </body>

   
   

   CSS

   make as you need for you design with the CSS.

   <style type="text/css">
   body { 
   margin: 0; 
   padding: 0; 
   font-family:Tahoma, Geneva, sans-serif; 
   font-size:18px;
   }
   
   #content{ 
   margin:0 auto; 
   border:0px green dashed; 
   width:800px; 
   min-height:150px; 
   margin-top:100px;
   }
   #load { 
   width:30px;
   padding-top:50px;
   border:0px green dashed;
   margin:0 auto;
   }
   #paginate
   {
   text-align:center;
   border:0px green solid;
   width:500px;
   margin:0 auto;
   }
   .link{
   width:800px; 
   margin:0 auto; 
   border:0px green solid;
   }
   
   li{ 
   list-style: none; 
   float: left;
   margin-right: 16px; 
   padding:5px; 
   border:solid 1px #193d81;
   color:#0063DC; 
   }
   li:hover
   { 
   color:#FF0084; 
   cursor: pointer; 
   }
   </style>
   

   
   try this code.

If you have any problem regarding this tutorial configuration please feel free to comment we love to answer your queries.