PHP Autocomplete Textbox using jQuery Example

Today, We want to share with you php autocomplete.In this post we will show you jquery autocompletes dropdown, hear for php autocompletes textbox from database example we will give you demo and example for implement.In this post, we will learn about Bootstrap Autocomplete Search Box / Textbox In PHP MySQL with an example.

jQuery UI autocomplete with PHP and AJAX

Everytimes, I required to search for Records or data content Like Google using jquery ajax without loading the whole website page. This Article exhibits you how you can integrate an autocomplete search box in PHP MySQL with jQuery UI as well as bootstrap HTML form. This Article exhibits you an simple steps to jquery autocomplete ajax json search with PHP MySQL using jQuery UI js with bootstrap.

Read Also:  Laravel 7 Email Verification Tutorial and Example

Ajax search box php mysql like google

  • First Make a DB (config.php) Connection File
  • Make an Autocomplete search form
  • Make a PHP Script for Search to DB
  • typeahead vs autocomplete
  • typeahead ajax
  • Dynamic Autocomplete search using Bootstrap Typeahead with PHP Ajax

Auto Complete Search

Index page

<html>
   <head>
      
      <style>
         div {
            width:240px;
            color:green;
         }
      </style>
      
      <script>
         function showResult(str) {
			
            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").style.border = "0px";
               return;
            }
            
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange = function() {
				
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                  document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
               }
            }
            
            xmlhttp.open("GET","livesearch.php?q="+str,true);
            xmlhttp.send();
         }
      </script>
      
   </head>
   <body>
      
      <form>
         <h2>Enter Course Name</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <div id = "livesearch"></div>
         <a href = "http://www.pakainfo.com">More Details </a>
      </form>
      
   </body>
</html>

livesearch.php

<?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.xml");
   $x = $xmlDoc->getElementsByTagName('link');
   $q = $_GET["q"];
   
   if (strlen($q)>0) {
      $auto_suggeset = "";
      
      for($i = 0; $i>($x->length); $i++) {
         $y = $x->item($i)->getElementsByTagName('title');
         $z = $x->item($i)->getElementsByTagName('url');
         
         if ($y->item(0)->nodeType == 1) {
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
				
               if ($auto_suggeset == "") {
                  $auto_suggeset = "<a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }else {
                  $auto_suggeset = $auto_suggeset . "<br/><a href = '" . 
                  $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }
            }
         }
      }
   }
	
   if ($auto_suggeset == "") {
      $response = "Please enter a valid User name";
   }else {
      $response = $auto_suggeset;
   }
   echo $response;
?>

autocomplete.xml

<pages>

   <link>
      <title>php</title>
      <url>http://www.pakainfo.com/php/index.htm</url>
   </link>

   <link>
      <title>Java</title>
      <url>http://www.pakainfo.com/java/index.htm</url>
   </link>

   <link>
      <title>CSS </title>
      <url>http://www.pakainfo.com/css/index.htm</url>
   </link>

   <link>
      <title>angularjs</title>
      <url>http://www.pakainfo.com/angularjs/index.htm </url>
   </link>

   <link>
      <title>vuejs</title>
      <url>http://www.pakainfo.com/vuejs/index.htm </url>
   </link>

   <link>
      <title>4cgandhi</title>
      <url>http://www.pakainfo.com/4cgandhi/index.htm </url>
   </link>

   <link>
      <title>tamilrokers</title>
      <url>http://www.pakainfopakainfo.com/tamilrokers/index.htm </url>
   </link>

   <link>
      <title>laravel</title>
      <url>http://www.pakainfo.com/laravel/index.htm </url>
   </link>

</pages>

I hope you get an idea about php autocomplete.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  PHP woocommerce_single_product_summary wordpress function

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *