Menu
Hi all,
I’m trying to mimic the Google suggestions using Javascript and Jquery. This is the complete code:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; CHARSET=UTF-8″/>
<title>Google suggest</title>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<style type=”text/css”>
ul {
position:absolute;
margin-left: -40px;
}
ul li {
list-style:none;
}
li.uli{
padding: 8px 16px 0px; 0 ;
display:block;
height:32px;
width: 368px;
list-style:none;
font-size: 16px;
font-family: arial;
}
li.uli:hover{
cursor:default;
}
#center {
position:relative;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 400px;
height: 460px;
border: solid 1px silver;
}
#inp {
position: relative;
padding: 8px 16px 0px; 0 ;
font-size: 16px;
top: 2px;
left: 2px;
height:32px;
width: 360px;
outline:none;
}
#inp2 {
display:none;
}
.current{
background:#E0EAF1;
}
</style>
</head>
<body>
<form id=”fo” method=”get” action=”http://google.com/search”>
<input name=”q” id=’inp2′ autocomplete=”off”/>
</form>
<div id=”center”>
<form id=”for” method=”get” action=”http://google.com/search”>
<input name=”q” id=’inp’ autocomplete=”off” onkeyup=””/>
<ul id=’test’>
<li></li>
</ul>
</form>
</div>
<script type=’text/javascript’>
$(document).ready(function(){
$(“#inp”).focus();
});
function el(tid) {return document.getElementById(tid);}
function addScript(u){
var head=document.getElementsByTagName(‘head’)[0],
sc2=document.createElement(‘script’); sc2.src=u;
head.appendChild(sc2);
setTimeout(function(){ head.removeChild(sc2); sc2=null;}, 200)
}//end addScript()
function suggest(data){
var sel=el(“test”); sel.innerHTML=”;
for(x=0; x<data[1].length;x++){
sel.innerHTML += ‘<li class=”uli” >’+data[1][x][0]+'</li>’;
}
}
el(“inp”).oninput=function(){
addScript(“http://www.google.nl/complete/search?callback=suggest&q=”+this.value);
}
$(‘#inp’).keyup(
function (e){
var curr = $(‘#test’).find(‘.current’);
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr(‘class’, ‘uli’);
curr = $(curr).next();
}
if(curr.length) {
curr.attr(‘class’, ‘uli current’);
} else {
$(‘#center li:first-child’).attr(‘class’, ‘uli current’);
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr(‘class’, ‘uli’);
curr = $(curr).prev();
}
if(curr.length) {
curr.attr(‘class’, ‘uli current’);
} else {
$(‘#center li:last-child’).attr(‘class’, ‘uli current’);
}
}
if(e.keyCode==40)
{
var search_terms = $(‘li.current’).text();
$(‘#inp’).val(search_terms);
}
if(e.keyCode==38)
{
var search_terms = $(‘li.current’).text();
$(‘#inp’).val(search_terms);
}
})
$(“#center”).hover(function(){
$(“#center uli.current”).removeClass(“current”);
$(this).addClass(“currents”);
var search_terms = $(‘.current’).text();
$(‘#inp2’).val(search_terms)
$(“#inp”).focus();
}
);
$(“div#center li”).live(“mouseover”,function(){
$(“.current”).removeClass(“current”);
$(this).addClass(“current”)
var search_terms = $(‘.current’).text();
$(‘#inp2’).val(search_terms)
$(“#inp”).focus();
}
);
$(“#test li”).live(“mousedown”, function() {
$(“#fo”).submit();
}
);
</script>
</body>
</html>
It doesn’t work in Jsfiddle so I put a demo on one of my websites over her: [URL=”http://yous-design.com/”]yous-design
The problem is that it works great in Chrome/Firefox but not in IE(8 tested). After some research it turns out the oninput event doesn’t work in IE and I would have to replace it with onpropertychange event. So I did but it still doesn’t work, I believe it has something to do with this piece of code:
[CODE]$(‘#inp’).keyup(
function (e){
The keyup is counteracting with the onpropertychange event, so now I can’t come down in the suggestion list using the arrow keys. What do I have to change in order to use the key navigation code(Jquery) as well as the plain Javascript of onpropertychange? Help is appreciated.