Introduction:

Php is one of the greatest and free open source programming languages which using millions of webmasters to create web applications and websites. Ajax and Jquery's are supporting Java languages which make the web apps more interactive and user-friendly. Today most of the internet surfing people don't like page refresh while surfing web pages. Today in this article, I am going to introduce you a method which allows your people to complete textbox entries with automated suggestions from the database without page refresh.

Demo Click here Download Click here

Requirements to Workout this Tutorial:

To do this tutorial, You have to create two pages "index.html" and "search.php." We can use the "index.html" page for input text. While input text to the textbox, the textbox will fetch data from the database and shows the suggestions. 

The "search.php" will work background by using Ajax and Jquery.  We will use the "search.php" to connect with the database and the code to fetch suggestions from the database.

In order to fetch details from the database, We have to create a database and a table inside it with some information. For that, Go to PHPMYADMIN and create a database and name it "helloworld" then click on the query executing window and execute the following SQL query.
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE `auto` (
  `sno` int(11) NOT NULL,
  `name` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `auto` (`sno`, `name`) VALUES
(1, 'Apple'),
(2, 'Mango'),
(3, 'Ball'),
(4, 'Rat'),
(5, 'Apple'),
(6, 'Samsung'),
(7, 'Huawei'),
(8, 'Lenovo'),
(9, 'My Passport'),
(10, 'Telephone');
ALTER TABLE `auto`
  ADD PRIMARY KEY (`sno`);
ALTER TABLE `auto`
  MODIFY `sno` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
After executing the query you have to copy and paste the code that given below to the "Index.html" Page.
<!DOCTYPE Html>
<html>
<head>
  <title>PHP Auto-Complete Using Jquery and Ajax</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script>
    $(function() {
    $( "#auto" ).autocomplete({
        source: 'search.php'
    });
    });
  </script>
  <header class="w3-container w3-teal">
  <h1>PHP Auto-Complete Using Jquery and Ajax</h1>
</header>
<div class="w3-container">
  <div class="w3-panel w3-pink">
    <h1 class="w3-opacity">Enter a Text :</h1>
  </div>
  <p>Example : Apple, Samsung, Huawei</p>
  <br>
  <input class="w3-input w3-border w3-light-grey" type="text" id="auto">
  <br>
  <a href="https://www.messenger.com/t/muhsintheblogger/"><img src="facebook.png" width="200"></a>
  <p>If you have any doubts in the implimentation of this tututorail project, Let me know by clicking the button that given above this paragraph..</p>
</div>
<footer class="w3-container w3-teal">
<h1>PHP Auto-Complete Using Jquery and Ajax : <a href="http://www.howi.in">HOWI.IN</a></h1>
</footer>
</body>
</html>

The above Html code contains an input textbox with id called auto ( id="auto" ). This will display the output from the search page. The page also contains Jquery libraries inside the head tag. Without it the code will not work.

Now copy and paste below script to the search.php page.
<?php
    //The below code will collect Database Information
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'helloworld';

    //This code will connect to database as per the information mentioned above
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);

    //Collect the search term from the text box
    $searchTerm = $_GET['term'];

    //Execute Query and fetch details from the database
    $query = $db->query("SELECT * FROM auto WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['name'];
    }

    //Display the result as Json
    echo json_encode($data);
?>

The above code will connect to the database and fetch the details from the database. The out will be in JSON format. Ajax complete output will convert it and display in the input box.

Suggested Article for Webmasters: 

I hope you well enjoyed this article. If you have any doubts or suggestions related to this article. Please let us know about it by using the comment box that given below. Thanks

0 comments:

Post a Comment

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .

 
Top