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:  Free Proxy list online - FREE and FRESH PROXY SERVERS LIST Socks and HTTP proxy

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:  jQuery Ajax Autocomplete Search From Database in Laravel 7

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  cURL Requests with Laravel 6 using ixudra/curl
  2. Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi
  3. Read Also:  Simple Materialize CSS Autocomplete Ajax using PHP
  4. Read Also:  PHP Check duplicated value in array Example
  5. Read Also:  PHP MySQL ajax Autocomplete Live Search Box in jQuery
  6. Read Also:  PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
  7. Read Also:  AngularJS Search Auto Suggestion box with PHP MySQLi
  8. Read Also:  PHP Autocomplete search with typeahead.js
  9. Read Also:  Session Flash Messages in Laravel 6 Tutorial
  10. Read Also:  Generate Bacon-qr code generator laravel Example
CLOSEX