Skip to content

Instantly share code, notes, and snippets.

@s4wny
Last active November 18, 2015 17:37
Show Gist options
  • Save s4wny/0f78a41ebec872a19645 to your computer and use it in GitHub Desktop.
Save s4wny/0f78a41ebec872a19645 to your computer and use it in GitHub Desktop.
ajax autocomplete tutorial
<?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));
?>
-- --------------------------------------------------------
-- 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");
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment