Membuat Autocomplete Text dengan PHP, AJAX dan Bootstrap

Juli 27, 2018 , 0 Comments

Autocomple text biasanya digunakan pada form pencarian, misalnya di situs pencarian google ketika kita mengetik kata kita akan disuguhkan beberapa suggestion yang bisa dipilih, selain itu bisa juga diaplikasikan pada sistem login, ketika kita memasukan email akan ada pilihan jika sebelumnya sudah memasukan email yang sama. untuk membuatnya kita akan menggunakan AJAX. 



langkah pertama buat dulu HTMLnya seperti dibawah:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autocomplete Text</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" charset="utf-8"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" charset="utf-8"></script>
</head>
<body>
<br><br>
<div class="container" style="width:600px;">
<h2 align="center">Autocomplete Textbox using Typeahead with Ajax PHP</h2>
<br><br>
<label>Search Country</label>
<input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
</div>
</body>
</html>

<script>
  $(document).ready(function(){

          $('#country').typeahead({
          source: function(query, result)
          {
          $.ajax({
          url:"fetch.php",
          method:"POST",
          data:{query:query},
          dataType:"json",
          success:function(data)
          {
          result($.map(data, function(item){
          return item;
          }));
          }
          })
          }
          });

          });
</script>

untuk jquery sama bootstrapnya diatas saya menggunakan CDN biar cepat, agar kita tidak usah download dulu, selanjutnya buat file php untuk mengambil datanya dari database

<?php



// fetch data

            $connect = mysqli_connect("localhost", "root", "", "database");

$request = mysqli_real_escape_string($connect, $_POST["query"]);

        $query = "SELECT * FROM countries WHERE name LIKE '%".$request."%'";



        $result = mysqli_query($connect, $query);



        $data = array();



        if (mysqli_num_rows($result) > 0)

        {

        while ($row = mysqli_fetch_assoc($result))

        {

        $data[] = $row["name"];

        }

        echo json_encode($data);

}

untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump

        -- version 4.5.1

        -- http://www.phpmyadmin.net

        --

        -- Host: 127.0.0.1

        -- Generation Time: 26 Sep 2017 pada 00.21

        -- Versi Server: 10.1.16-MariaDB

        -- PHP Version: 5.6.24



        SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

        SET time_zone = "+00:00";





/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;



        --

        -- Database: `database`

        --



        -- --------------------------------------------------------



        --

        -- Struktur dari tabel `countries`

        --



        CREATE TABLE `countries` (

        `id` int(11) NOT NULL,

        `sortname` varchar(3) NOT NULL,

        `name` varchar(150) NOT NULL,

        `phonecode` int(11) NOT NULL

        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;



        --

        -- Dumping data untuk tabel `countries`

        --



        INSERT INTO `countries` (`id`, `sortname`, `name`, `phonecode`) VALUES

        (1, 'AT', 'Austria', 99),

        (2, 'US', 'United State', 1),

        (3, 'ID', 'Indonesia', 62),

        (4, 'IN', 'India', 60),

        (5, 'AG', 'Afganistan', 11),

        (6, 'UEA', 'Uni Emirate Arab', 20),

        (7, 'QA', 'Qatar', 32),

        (8, 'BR', 'Brazil', 46),

        (9, 'IC', 'Iceland', 10),

        (10, 'UK', 'United Kingdom', 12),

        (11, 'SW', 'Swiss', 9),

        (12, 'AU', 'Australia', 6),

        (13, 'FN', 'Finlandia', 23);



        --

        -- Indexes for dumped tables

        --



        --

        -- Indexes for table `countries`

        --

        ALTER TABLE `countries`

        ADD PRIMARY KEY (`id`);



        --

        -- AUTO_INCREMENT for dumped tables

        --



        --

        -- AUTO_INCREMENT for table `countries`

        --

        ALTER TABLE `countries`

        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Selanjutnya jalankan Program Anda, jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah. jika artikel ini bermanfaat silakan share ke teman anda, terimakasih sudah berkunjung ke blog kami.

Lihat Demo

0 komentar :

Langganan: Postingan ( Atom )