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">
</div>
</div>
</form>
</div>
</body>
</html>Php Autocomplete PHP script
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/
games for girls
hiiii,
please give me source code of auto search with php with mysql
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.
Hey man! Cool blog! I really liked being here.