Aplikasi SPPD atau Surat Perintah Perjalanan Dinas gratis, si KENCUR berbagi yang boleh dibagi. Bau Kencur, Software, Hardware dan Networking

kencur,sikencur,aplikasi,tips dan trik, informasi,aplikasi sekolah gratis,pendidikan,aplikasi sekolah,bejalar office

Aplikasi SPPD

Aplikasi SPPD Mini

Php Autocomplete Text Box With Jquery-1.4.2 And Mysql

autocompletejquery.jpg 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">
<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.
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
} // lookup
function fill(thisValue) {
setTimeout("$('#suggestions').hide();", 200);
<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;
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<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">

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

$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 '',
-- 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/

4 thoughts on “Php Autocomplete Text Box With Jquery-1.4.2 And Mysql”

  1. Zeriarroday berkata:

    games for girls

  2. chirag berkata:

    please give me source code of auto search with php with mysql

    1. securesh berkata:

      auto complete or auto search? if you think auto search is not on my site :(
      if auto complete with php and mysql this the link to donlot.

  3. cardaddy berkata:

    Hey man! Cool blog! I really liked being here.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *