in internet explorer its working fine, where as coming to firefox its
showing =EF=BB=BF symbol with the output.
thanking u in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8" />
<title>Ajax Auto Suggest</title>
<script type=3D"text/javascript" src=3D"jquery-1.2.1.pack.js"></script>
<script type=3D"text/javascript">
function lookup(inputString) {
if(inputString.length =3D=3D 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=3D"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:
<input type=3D"text" size=3D"30" value=3D"" id=3D"inputString"
onkeyup=3D"lookup(this.value);" onblur=3D"fill();" />
</div>
<div class=3D"suggestionsBox" id=3D"suggestions" style=3D"display:
none;">
<img src=3D"upArrow.png" style=3D"position: relative; top:
-12px; left: 30px;" alt=3D"upArrow" />
<div class=3D"suggestionList" id=3D"autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
