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

Sunday, January 23, 2011

Display clock Your html page

Display clock using javasript:

java script header section code:

function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; }
function dT(){ if(fr==0){ fr=1; document.write(''+eval(oT)+''); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
function aP(x){ return (x>11)?'pm':'am'; }
var fr=0,oT="tH(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '+aP(tS().getHours())";


inside the html page add below this code (Add where ever you want display clock):

'<'script language="JavaScript">dT();'<'/
script>