QuestionAsk Questions?
Saakshi Dikshit
I have to create a project where the user enters a letter in a text box and all the names starting with that letter are retrieved. I'm using PHP and MYSQL as the database. Can somebody please suggest me the AJAX coding of this.
View Answers
October 4, 2012 at 5:11 PM
Here is a php code that shows autosuggest box.
1)index.php:
<html>
<head>
<script type="text/javascript" src="./plugin/jquery.js"></script>
<script>
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#country').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
</script>
<style>
#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:17px;
}
.suggestionsBox {
position: absolute;
left: 0px;
top:40px;
margin: 26px 0px 0px 0px;
width: 200px;
padding:0px;
background-color: #000;
border-top: 3px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}
.load{
background-position:right;
background-repeat:no-repeat;
}
#suggest {
position:relative;
}
</style>
</head>
<body>
<form id="form" action="#">
<div id="suggest">Start to type a country: <br />
<input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class="" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="suggestionsList"> </div>
</div>
</div>
</form>
</body>
</html>
Please visit the following link:
http://www.roseindia.net/tutorial/ajax/jquery/autocomplete.html
October 4, 2012 at 5:12 PM
continue..
<?php
$db_host = 'Your database host name';
$db_username = 'Your datbase username';
$db_password = 'Your database password';
$db_name = 'Your database name';
$db = new mysqli($db_host, $db_username ,$db_password, $db_name);
if(!$db) {
echo '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 country FROM countries WHERE country LIKE '$queryString%' LIMIT 10");
if($query) {
echo '<ul>';
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.addslashes($result->country).'\');">'.$result->country.'</li>';
}
echo '</ul>';
} else {
echo 'OOPS we had a problem :(';
}
} else {
// do nothing
}
} else {
echo 'There should be no direct access to this script!';
}
}
?>
For more information, visit the following link:
Please visit the following link:
http://www.roseindia.net/tutorial/ajax/jquery/autocomplete.html
October 4, 2012 at 5:12 PM
The above code is autosuggest.php.
Related Pages:
