?
Solved

javascript: highlighting div with arrow keys

Posted on 2009-12-29
6
Medium Priority
?
605 Views
Last Modified: 2013-11-08
Hello,

I have an input which, upon entry of letters, shows a div with input suggestions. Currently the suggestions get highlighted upon mouseover, and the input value becomes the suggestion value when clicking on the suggestion.
How can I have the suggestion be highlighted and populate the input through the user clicking the up and down arrows?

Here's my code:

<html>
<head>
 <style type="text/css">
      .suggmain
        {
            display:none;
            width:489px;
            background-color:White;
            position:relative;
            padding:1px;
            z-index:99999;
           
            border-color:#A0522D;
            border-width:2px;
            border-style:solid;
        }
        .suggclass
        {
            color:#A0522D;
            font-size:15px;
            font-weight:bold;
            margin-top:10px;
        }
        .suggres
        {
            height:25px;
        }
     
     
     </style>
</head>
<body>
<div style="position:absolute;top:80px;width:495px;left:50%; margin-left:-246px;">
  <div style="height:40px; background-color:white;width:491px;
 border-style:solid; border-width:2px; border-color:#A0522D">
 <input name="s" id="q" autocomplete="off" type="text" onkeyup="obj.pingSearch();"  style="position:absolute;top:5px;width:400px;left:5px;height:30px;
 font-size:x-large; font-weight:bold;color:#A0522D; border-color:white;border-style:none;border-width:0px" onkeypress="var k=event.keyCode||event.which;if(k==13){search()}" />
</div>

    <div id="suggbox" class="suggmain" ></div>

    </div>
    <script type="text/javascript">
   
function blursugg()
{
document.getElementById('suggbox').style.display="none";
document.getElementById('suggbox').innerHTML="";
}

function sugghil(t)
{
t.style.backgroundColor="#FFE4B5";
}

function sugglol(t)
{
t.style.backgroundColor="#FFFFFF";
}

function choosesugg(t)
{
if(document.all){
     var sugv=t.innerText;
} else{
    var sugv=t.textContent;
}
document.getElementById("q").value=sugv;
document.getElementById('suggbox').style.display="none";
}

var google = {
    ac: {
        h: function(queryTerm) {
            /* Do something with the queryTerm and/or the suggestions Array */
            ln=queryTerm[1].length;
            if (document.getElementById("q").value!==" "){document.getElementById('suggbox').style.display="block";}
  else{document.getElementById('suggbox').style.display="none";}
  document.getElementById('suggbox').innerHTML="";
    var objr='<div class="suggclass">';
    var suggItem='<div class="suggres" onmouseover="sugghil(this);" onmouseout="sugglol(this);" onclick="choosesugg(this);">{res}</div>'
              for (var i = 0; i < ln; i++)
            {
            objr+=suggItem.replace('{res}',queryTerm[1][i][0]);
           
            }
            objr+='</div>';//alert(objr);
    document.getElementById('suggbox').innerHTML += objr;
        }
    }
};

var obj =
{
 
  pingSearch : function()
  {
 
  var queval=document.getElementById("q").value;
    if (queval)
    {
      obj.s = document.createElement('script');
      obj.s.type ='text/javascript';
      obj.s.charset ='utf-8';
      obj.s.src = 'http://suggestqueries.google.com/complete/search?hl=en&q=' + queval;
      document.getElementsByTagName('head')[0].appendChild(obj.s);
    }
  }
};
    </script>
</body>
</html>

0
Comment
Question by:Feivi99
  • 3
  • 3
6 Comments
 
LVL 10

Expert Comment

by:mstrelan
ID: 26143279
ok this is a bit messy but it works
0
 
LVL 10

Accepted Solution

by:
mstrelan earned 2000 total points
ID: 26143280

<html>
<head>
 <style type="text/css">
      .suggmain
        {
            display:none;
            width:489px;
            background-color:White;
            position:relative;
            padding:1px;
            z-index:99999;
           
            border-color:#A0522D;
            border-width:2px;
            border-style:solid;
        }
        .suggclass
        {
            color:#A0522D;
            font-size:15px;
            font-weight:bold; 
            margin-top:10px;
        }
        .suggres
        {
            height:25px;
        }
     
     
     </style>
</head>
<body>
<div style="position:absolute;top:80px;width:495px;left:50%; margin-left:-246px;">
  <div style="height:40px; background-color:white;width:491px;
 border-style:solid; border-width:2px; border-color:#A0522D">
 <input name="s" id="q" autocomplete="off" type="text" onkeyup="obj.pingSearch(event);"  style="position:absolute;top:5px;width:400px;left:5px;height:30px;
 font-size:x-large; font-weight:bold;color:#A0522D; border-color:white;border-style:none;border-width:0px" onkeypress="var k=event.keyCode||event.which;if(k==13){search()}" />
</div>

    <div id="suggbox" class="suggmain" ></div>

    </div>
    <script type="text/javascript">
    
function blursugg()
{
document.getElementById('suggbox').style.display="none";
document.getElementById('suggbox').innerHTML="";
}

function sugghil(t)
{
t.style.backgroundColor="#FFE4B5";
}

function sugglol(t)
{
t.style.backgroundColor="#FFFFFF";
}

function choosesugg(t, hide)
{
if (hide == null) {
  hide = false;
}
if(document.all){
     var sugv=t.innerText;
} else{
    var sugv=t.textContent;
}
document.getElementById("q").value=sugv;
if (hide) {
    document.getElementById('suggbox').style.display="none";
}
}

var selected;

var google = {
    ac: {
        h: function(queryTerm) {
            /* Do something with the queryTerm and/or the suggestions Array */
            ln=queryTerm[1].length;
            if (document.getElementById("q").value!==" "){document.getElementById('suggbox').style.display="block";}
  else{document.getElementById('suggbox').style.display="none";}
  document.getElementById('suggbox').innerHTML="";
    var objr='<div class="suggclass" id="suggclass">';
    var suggItem='<div class="suggres" onmouseover="sugghil(this);" onmouseout="sugglol(this);" onclick="choosesugg(this);">{res}</div>'
              for (var i = 0; i < ln; i++)
            {
            objr+=suggItem.replace('{res}',queryTerm[1][i][0]);
           
            }
            objr+='</div>';//alert(objr);
    document.getElementById('suggbox').innerHTML += objr;
        }
    }
};

var obj =
{
  
  pingSearch : function(event)
  {
  if(window.event) {
    keyPressed = window.event.keyCode;
  } else {
    keyPressed = event.which;
  }
  if (keyPressed == 40 || keyPressed == 38) {
    var suggclass = document.getElementById('suggclass');
    if (typeof(selected) == 'undefined' || selected == null) {
      selected = (keyPressed == 40) ? 0 : (suggclass.children.length - 1);
    }
    else {
      sugglol(suggclass.children[selected]);
      if (keyPressed == 40 && selected < suggclass.children.length - 1) {
        ++selected;
      }
      else if (keyPressed == 38 && selected > 0) {
        --selected;
      }
    }
      choosesugg(suggclass.children[selected], false);
      sugghil(suggclass.children[selected]);
//    alert(suggclass.children.length);
  }
  else {
  var queval=document.getElementById("q").value;
    if (queval)
    {
      obj.s = document.createElement('script');
      obj.s.type ='text/javascript';
      obj.s.charset ='utf-8';
      obj.s.src = 'http://suggestqueries.google.com/complete/search?hl=en&q=' + queval;
      document.getElementsByTagName('head')[0].appendChild(obj.s);
    }
  } 
  }
};
    </script>
</body>
</html>

Open in new window

0
 

Author Comment

by:Feivi99
ID: 26145306
mstrelan,

I didn't think it was messy, I thought it was great :-) !

One more detail, though: can this be modified so that the user can keep his finger on the button to get through the results quicker? RIght now it only goes one by one.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:Feivi99
ID: 26145915
In addition, the "suggbox: is now not hiding when choosing a suggestion.
0
 
LVL 10

Expert Comment

by:mstrelan
ID: 26150770
Key presses: What browser / operating system? In Firefox and Chrome on Ubuntu it is working fine for me. There is often a repeat delay set in keyboard properties in the operating system...

Suggbox not hiding: In the function choosesugg(t, hide) change the hide = false to hide = true
0
 

Author Comment

by:Feivi99
ID: 26156025
mstrelan,

I realized the problem was that we were using "onkeyup", so obviously holding the button down wouldnt do anything. It's actually a little perplexing that Ubuntu IS allowing it to happen.

Anyway, I divided your code into two functions, with your code being called with a "onkeydown", and it's works great. Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question