ajax autocomplete tutorial

backend.php

<?php

$mysqli = new mysqli('localhost', 'test', 'test', 'test');

if($mysqli->connect_errno)
    exit("Connect failed: %s\n". $mysqli->connect_error);

$stmt = $mysqli->prepare("SELECT name FROM states WHERE name LIKE ?");

if($stmt) {
    $search = '%'. $_GET['search'] .'%';
    $stmt->bind_param('s', $search);
    $stmt->execute();
    $stmt->bind_result($state);
    
    while ($stmt->fetch()) {
        $result[] = $state;
    }
    $stmt->close();
}
else {
    exit("Error:". $mysql->error);
}

$mysqli->close();

// Gör om PHP arrays till en textsträng som javascript kan konvertera tillbaka till en array
// Exempel:
// json_encode(array('a', 'b', 'c', 'osv')) => "['a', 'b', 'c', 'osv']"
exit(json_encode($result));

?>

db.sql

-- --------------------------------------------------------
-- Host:                         127.0.0.1
-- Server version:               5.6.19-0ubuntu0.14.04.1 - (Ubuntu)
-- Server OS:                    debian-linux-gnu
-- HeidiSQL Version:             9.3.0.4984
-- --------------------------------------------------------


-- Dumping database structure for test
CREATE DATABASE IF NOT EXISTS `test` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `test`;


-- Dumping structure for table test.states
DROP TABLE IF EXISTS `states`;
CREATE TABLE IF NOT EXISTS `states` (
  `name` varchar(30) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table test.states: ~0 rows (approximately)
DELETE FROM `states`;
 INSERT INTO `states` (`name`) VALUES ("Alabama");
 INSERT INTO `states` (`name`) VALUES ("Alaska");
 INSERT INTO `states` (`name`) VALUES ("American Samoa");
 INSERT INTO `states` (`name`) VALUES ("Arizona");
 INSERT INTO `states` (`name`) VALUES ("Arkansas");
 INSERT INTO `states` (`name`) VALUES ("California");
 INSERT INTO `states` (`name`) VALUES ("Colorado");
 INSERT INTO `states` (`name`) VALUES ("Connecticut");
 INSERT INTO `states` (`name`) VALUES ("Delaware");
 INSERT INTO `states` (`name`) VALUES ("District Of Columbia");
 INSERT INTO `states` (`name`) VALUES ("Federated States Of Micronesia");
 INSERT INTO `states` (`name`) VALUES ("Florida");
 INSERT INTO `states` (`name`) VALUES ("Georgia");
 INSERT INTO `states` (`name`) VALUES ("Guam");
 INSERT INTO `states` (`name`) VALUES ("Hawaii");
 INSERT INTO `states` (`name`) VALUES ("Idaho");
 INSERT INTO `states` (`name`) VALUES ("Illinois");
 INSERT INTO `states` (`name`) VALUES ("Indiana");
 INSERT INTO `states` (`name`) VALUES ("Iowa");
 INSERT INTO `states` (`name`) VALUES ("Kansas");
 INSERT INTO `states` (`name`) VALUES ("Kentucky");
 INSERT INTO `states` (`name`) VALUES ("Louisiana");
 INSERT INTO `states` (`name`) VALUES ("Maine");
 INSERT INTO `states` (`name`) VALUES ("Marshall Islands");
 INSERT INTO `states` (`name`) VALUES ("Maryland");
 INSERT INTO `states` (`name`) VALUES ("Massachusetts");
 INSERT INTO `states` (`name`) VALUES ("Michigan");
 INSERT INTO `states` (`name`) VALUES ("Minnesota");
 INSERT INTO `states` (`name`) VALUES ("Mississippi");
 INSERT INTO `states` (`name`) VALUES ("Missouri");
 INSERT INTO `states` (`name`) VALUES ("Montana");
 INSERT INTO `states` (`name`) VALUES ("Nebraska");
 INSERT INTO `states` (`name`) VALUES ("Nevada");
 INSERT INTO `states` (`name`) VALUES ("New Hampshire");
 INSERT INTO `states` (`name`) VALUES ("New Jersey");
 INSERT INTO `states` (`name`) VALUES ("New Mexico");
 INSERT INTO `states` (`name`) VALUES ("New York");
 INSERT INTO `states` (`name`) VALUES ("North Carolina");
 INSERT INTO `states` (`name`) VALUES ("North Dakota");
 INSERT INTO `states` (`name`) VALUES ("Northern Mariana Islands");
 INSERT INTO `states` (`name`) VALUES ("Ohio");
 INSERT INTO `states` (`name`) VALUES ("Oklahoma");
 INSERT INTO `states` (`name`) VALUES ("Oregon");
 INSERT INTO `states` (`name`) VALUES ("Palau");
 INSERT INTO `states` (`name`) VALUES ("Pennsylvania");
 INSERT INTO `states` (`name`) VALUES ("Puerto Rico");
 INSERT INTO `states` (`name`) VALUES ("Rhode Island");
 INSERT INTO `states` (`name`) VALUES ("South Carolina");
 INSERT INTO `states` (`name`) VALUES ("South Dakota");
 INSERT INTO `states` (`name`) VALUES ("Tennessee");
 INSERT INTO `states` (`name`) VALUES ("Texas");
 INSERT INTO `states` (`name`) VALUES ("Utah");
 INSERT INTO `states` (`name`) VALUES ("Vermont");
 INSERT INTO `states` (`name`) VALUES ("Virgin Islands");
 INSERT INTO `states` (`name`) VALUES ("Virginia");
 INSERT INTO `states` (`name`) VALUES ("Washington");
 INSERT INTO `states` (`name`) VALUES ("West Virginia");
 INSERT INTO `states` (`name`) VALUES ("Wisconsin");
 INSERT INTO `states` (`name`) VALUES ("Wyoming");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Sök:
    <input type="text" name="search" id="js-search">
    <ul id="js-autocomplete"></ul>
    

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>

        $("#js-search").on('keyup', function() {
            userInput = $("#js-search").val();

            $.getJSON('backend.php?search='+ userInput, function(response) {
                li = "";
                response.forEach(function(value) {
                    li += "<li>"+ value +"</li>";
                });

                $("#js-autocomplete").html(li);
            }); 
        });

    </script>
</body>
</html>