Auto complete suggestion Jquery,PHP with nice form

Hi friend, I hope all are good now I am describing how to create auto complete suggestion with help of jquery and php.

Step1:

first we will create HTML layout file which is contain all reference file as well as all CSS style code.

HTML CODE
view plaincopy to clipboardprint?
  1. <link rel=“stylesheet” type=“text/css” href=“style.css” />  
  2. <script type=“text/javascript” src=“jquery-1.2.1.pack.js”></script>  
  3. <script type=“text/javascript” src=“js/jconfirmaction.jquery.js”></script>  
  4. <script type=“text/javascript”>  
  5.       
  6.     $(document).ready(function() {  
  7.         $(‘.ask’).jConfirmAction();  
  8.     });  
  9.       
  10. </script>  
  11. <script type=“text/javascript” src=“js/jquery.min.js”></script>  
  12.   
  13. <script language=“javascript” type=“text/javascript” src=“js/niceforms.js”></script>  
  14. <link rel=“stylesheet” type=“text/css” media=“all” href=“js/niceforms-default.css” />  
  15.   
  16. <script type=“text/javascript”>  
  17.     function lookup(inputString) {  
  18.         if(inputString.length == 0) {  
  19.             // Hide the suggestion box.  
  20.             $(‘#suggestions’).hide();  
  21.         } else {  
  22.             $.post(“rpc.php”, {queryString: “”+inputString+“”}, function(data){  
  23.                 if(data.length >0) {  
  24.                     $(‘#suggestions’).show();  
  25.                     $(‘#autoSuggestionsList’).html(data);  
  26.                 }  
  27.             });  
  28.         }  
  29.     } // lookup  
  30.       
  31.     function fill(thisValue) {  
  32.         $(‘#inputString’).val(thisValue);  
  33.         setTimeout(“$(‘#suggestions’).hide();”, 200);  
  34.     }  
  35. </script>  
  36.   
  37. <style type=“text/css”>  
  38.     body {  
  39.         font-family: Helvetica;  
  40.         font-size: 11px;  
  41.         color: #000;  
  42.     }  
  43.       
  44.     h3 {  
  45.         margin: 0px;  
  46.         padding: 0px;     
  47.     }  
  48.   
  49.     .suggestionsBox {  
  50.         position: absolute;  
  51.         left: 30px;  
  52.         margin: 10px 0px 0px 0px;  
  53.         width: 200px;  
  54.         background-color: #212427;  
  55.         -moz-border-radius: 7px;  
  56.         -webkit-border-radius: 7px;  
  57.         border: 2px solid #000;   
  58.         color: #fff;  
  59.     }  
  60.       
  61.     .suggestionList {  
  62.         margin: 0px;  
  63.         padding: 0px;  
  64.     }  
  65.       
  66.     .suggestionList li {  
  67.           
  68.         margin: 0px 0px 3px 0px;  
  69.         padding: 3px;  
  70.         cursor: pointer;  
  71.     }  
  72.       
  73.     .suggestionList li:hover {  
  74.         background-color: #659CD8;  
  75.     }  
  76. </style>  
  77.   
  78.   
  79. </head>  
  80.   
  81. <body>  
  82.   
  83.   
  84.     <div>  
  85.           
  86.             <div>  
  87.                 Type your county:  
  88.                   
  89.   
  90.                 <input type=“text” size=“30″ value=“” id=“inputString” onkeyup=“lookup(this.value);” onblur=“fill();” />  
  91.             </div>  
  92.               
  93.             <div class=“suggestionsBox” id=“suggestions” style=“display: none;”>  
  94.                 <img src=“upArrow.png” style=“position: relative; top: -12px; left: 30px;z-index:8880″ alt=“upArrow” />  
  95.                 <div class=“suggestionList” id=“autoSuggestionsList”>  
  96.                     &nbsp;  
  97.                 </div>  
  98.                   
  99.             </div>  
  100.             <div>dddddddddddddddddddd<div>  
  101.             <div class=“form”>  
  102.          <form action=“” method=“post” class=“niceform”>  
  103.           
  104.                 <fieldset>  
  105.                     <dl>  
  106.                         <dt><label for=“email”>Email Address:</label></dt>  
  107.                         <dd><input type=“text” name=“” id=“” size=“54″ /></dd>  
  108.                     </dl>  
  109.                     <dl>  
  110.                         <dt><label for=“password”>Password:</label></dt>  
  111.                         <dd><input type=“text” name=“” id=“” size=“54″ /></dd>  
  112.                     </dl>  
  113.                      
  114.                      
  115.                     <dl>  
  116.                         <dt><label for=“gender”>Select categories:</label></dt>  
  117.                         <dd>  
  118.                             <select size=“1″ name=“gender” id=“”>  
  119.                                 <option value=“”>Select option 1</option>  
  120.                                 <option value=“”>Select option 2</option>  
  121.                                 <option value=“”>Select option 3</option>  
  122.                                 <option value=“”>Select option 4</option>  
  123.                                 <option value=“”>Select option 5</option>  
  124.                             </select>  
  125.                         </dd>  
  126.                     </dl>  
  127.                     <dl>  
  128.                         <dt><label for=“interests”>Select tags:</label></dt>  
  129.                         <dd>  
  130.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Web design</label>  
  131.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Business</label>  
  132.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Simple</label>  
  133.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Clean</label>  
  134.                         </dd>  
  135.                     </dl>  
  136.                      
  137.                     <dl>  
  138.                         <dt><label for=“color”>Select type</label></dt>  
  139.                         <dd>  
  140.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Basic</label>  
  141.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Medium</label>  
  142.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Premium</label>  
  143.                         </dd>  
  144.                     </dl>  
  145.                      
  146.                      
  147.                      
  148.                     <dl>  
  149.                         <dt><label for=“upload”>Upload a File:</label></dt>  
  150.                         <dd><input type=“file” name=“upload” id=“upload” /></dd>  
  151.                     </dl>  
  152.                      
  153.                     <dl>  
  154.                         <dt><label for=“comments”>Message:</label></dt>  
  155.                         <dd><textarea name=“comments” id=“comments” rows=“5″ cols=“36″></textarea></dd>  
  156.                     </dl>  
  157.                      
  158.                     <dl>  
  159.                         <dt><label></label></dt>  
  160.                         <dd>  
  161.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>I agree to the <a href=“#”>terms &amp; conditions</a></label>  
  162.                         </dd>  
  163.                     </dl>  
  164.                      
  165.                      <dl class=“submit”>  
  166.                     <input type=“submit” name=“submit” id=“submit” value=“Submit” />  
  167.                      </dl>  
  168.                       
  169.                       
  170.                      
  171.                 </fieldset>  
  172.                  
  173.          </form>  
  174.          </div>   
  175.           
  176.     </div>  

Step2:

Now we will create PHP script file, It has all Sql Query to get matching records for show auto suggestion.

PHP Code
view plaincopy to clipboardprint?
  1. <?php  
  2.       
  3.     // PHP5 Implementation - uses MySQLi.  
  4.     // mysqli(‘localhost’, ’yourUsername’, ’yourPassword’, ’yourDatabase’);  
  5. $dbLink = mysql_connect(‘localhost’, ‘root’ ,”) ;  
  6. $db = mysql_select_db(‘test’,$dbLink);  
  7.     //$db = new mysql_connect(‘localhost’, ’root’ ,”, ’test’);  
  8.       
  9.     if(!$db) {  
  10.         // Show error if we cannot connect.  
  11.         echo ‘ERROR: Could not connect to the database.’;  
  12.     } else {  
  13.         // Is there a posted query string?  
  14.         if(isset($_POST['queryString'])) {  
  15.             $queryString = mysql_real_escape_string($_POST['queryString']);  
  16.               
  17.             // Is the string length greater than 0?  
  18.               
  19.             if(strlen($queryString) >0) {  
  20.                 // Run the query: We use LIKE ’$queryString%’  
  21.                 // The percentage sign is a wild-card, in my example of countries it works like this…  
  22.                 // $queryString = ’Uni’;  
  23.                 // Returned data = ’United States, United Kindom’;  
  24.                   
  25.                 // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.  
  26.                 // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE ’$queryString%’ LIMIT 10  
  27.                   
  28.              $query = mysql_query(“SELECT value FROM countries WHERE value LIKE ’$queryString%’ LIMIT 10″);  
  29.               
  30.                 if($query) {  
  31.                     // While there are results loop through them - fetching an Object (i like PHP5 btw!).  
  32.                       
  33.                     while ($result = mysql_fetch_row($query)) {  
  34.                         // Format the results, im using <li> for the list, you can change it.  
  35.                         // The onClick function fills the textbox with the result.  
  36.                           
  37.                         // YOU MUST CHANGE: $result->value to $result->your_colum  
  38.                         echo ‘<li onClick=”fill(\”.$result[0].‘\’);”>’.$result[0].‘</li>’;  
  39.                     }  
  40.                 } else {  
  41.                     echo ‘ERROR: There was a problem with the query.’;  
  42.                 }  
  43.             } else {  
  44.                 // Dont do anything.  
  45.             } // There is a queryString.  
  46.         } else {  
  47.             echo ‘There should be no direct access to this script!’;  
  48.         }  
  49.     }  
  50. ?>