Php Autocomplete Text Box With Jquery-1.4.2 And Mysql

Php Autocomplete Text Box With Jquery-1.4.2 And Mysql. It’s very cool, we can create the auto suggest text box like google search text box with JQuery 1.4.2. Auto suggest will show when we typing on the text box, And data in auto suggest is result from mysql query. Simple but need to be focus when you build it :D .
The first step to create it is :
Create file index.html and fill with this code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!--<script type="text/javascript" src="jquery-1.2.1.pack.js"></script> -->
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
</form>
</div>
</body>
</html>

Second step :
Create file rpc.php and fill with this code:

<?php
$db = new mysqli('localhost', 'root' ,'', 'autocomplete');
if(!$db) {
echo 'ERROR: Could not connect to the database.';
} else {
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
if(strlen($queryString) >0) {
$query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>

Edit on line 5 passing with your conditions.
Third step is create database with db name = autocomplete and execute this sql script

-- --------------------------------------------------------
--
-- Table structure for table `countries`
--
CREATE TABLE `countries` (
`id` int(6) NOT NULL auto_increment,
`value` varchar(250) NOT NULL default '',
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;
--
-- Dumping data for table `countries`
--
INSERT INTO `countries` VALUES (1, 'Afghanistan');
INSERT INTO `countries` VALUES (2, 'Aringland Islands');
INSERT INTO `countries` VALUES (3, 'Albania');
INSERT INTO `countries` VALUES (22, 'Belgium');
INSERT INTO `countries` VALUES (23, 'Belize');
INSERT INTO `countries` VALUES (24, 'Benin');
INSERT INTO `countries` VALUES (25, 'Bermuda');
INSERT INTO `countries` VALUES (26, 'Bhutan');
INSERT INTO `countries` VALUES (27, 'Bolivia');
INSERT INTO `countries` VALUES (28, 'Bosnia and Herzegovina');
INSERT INTO `countries` VALUES (29, 'Botswana');
INSERT INTO `countries` VALUES (30, 'Bouvet Island');
INSERT INTO `countries` VALUES (31, 'Brazil');
INSERT INTO `countries` VALUES (32, 'British Indian Ocean territory');
INSERT INTO `countries` VALUES (33, 'Brunei Darussalam');
INSERT INTO `countries` VALUES (34, 'Bulgaria');
INSERT INTO `countries` VALUES (35, 'Burkina Faso');
INSERT INTO `countries` VALUES (36, 'Burundi');
INSERT INTO `countries` VALUES (37, 'Cambodia');
INSERT INTO `countries` VALUES (38, 'Cameroon');
INSERT INTO `countries` VALUES (102, 'Indonesia');
INSERT INTO `countries` VALUES (241, 'Zimbabwe');

The last step is download the latest JQuery or jquery-1.4.2.js (this articel is using 1.4.2 version) from JQuery.com and put the file on the directory same with index.html and rpc.php.
For simple just download the file HERE.

Source : http://www.nodstrum.com/2007/09/19/autocompleter/

Kencur Asep

:)

View Comments

Share
Published by
Kencur Asep

Recent Posts

Install Debian 8.0 (Jessie) Menggunakan Mode Text

Untuk memulai menginstall sistem operasi jaringan Debian 8.0 (Jessie) menggunakan mode text kita dapat memulai dengan menyediakan DVD installer Debian…

1 tahun ago

Membuat Virtual Mesin Pada Oracle VirtualBox

Teknologi virtualisasi yang sudah ada sangat membantu untuk kita yang ingin belajar bagaimana untuk menginstall atau memasang bermacam macam jenis…

1 tahun ago

Pemrograman Dasar 10 SMK – TIPE DATA

variabel merupakan suatu simbol untuk menyimpan nilai tertentu. Nilai-nilai apa sajakah yang dapat disimpan oleh variabel, tergantung pada peruntukan variabel…

1 tahun ago

Tugas 1 MWDUCS 201720181

Tugas 1 : buat kelompok maksimal 4 anak dalam 1 kelompok. 1. tuliskan dan jelaskan perintah "mysql.exe -u root -p"…

1 tahun ago

Bolehkah saya tertawa?

bolehkah saya tertawa? ini sungguh lucu. akukah yang gila? ataukah mereka? bak anak kecil, ini seperti salah yang biasa. wajar,…

2 tahun ago

Aku adalah orang yang pernah menjadi aku yang muda

Ketika tua menenggelamkanku, Biar saja aku menjadi tua Aku adalah orang yang pernah menjadi aku yang muda. Bukan muda namun…

2 tahun ago

This website uses cookies.