Tuesday, January 25, 2011

onKeyUp search database data to select form value

onKeyUp search database data to select form value using jquery:

Header section:

'<'script type="text/javascript" src="jquery-1.2.1.pack.js">'<'/script>
'<'script type="text/javascript">
function lookup(bknm) {
if(bknm.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("search.php", {queryString: ""+bknm+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup

function fill(thisValue) {
$('#bknm').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}

'<'/script>
'<'style type="text/css">
.formtab{border:1px #000000 solid; }
.suggestionsBox {
position: relative;
left: 80px;
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>

Inside the body:

'<'form action="jqry.php" method="post">
'<'input class="formtab" name="bknm" type="text" id="bknm" onkeyup="lookup(this.value);" onblur="fill();">
'<'input name="submit" type="submit" value="submit" />
'<'/form>


Search.php:

'<'?php
$db = new mysqli('localhost', 'root' ,'', 'dbname');
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 name FROM employee WHERE name LIKE '%$queryString%' LIMIT 10");
if($query)
{
while ($result = $query ->fetch_object())
{

$name=
$result ->name;
echo ''<'li onClick="fill(\''.$book_name.'\');">'.$book_name.''<'/li>';
}
}
else
{
echo 'ERROR: There was a problem with the query.';
}
}
else
{
}
}
else
{
echo 'There should be no direct access to this script!';
}
}

?>

download jquery-1.2.1.pack.js

2 comments: