Click here to Skip to main content
14,297,827 members
Rate this:
Please Sign up or sign in to vote.
See more:
hello all,

I have text-box on focus and key-up of which div tag will get respective content and by mouse click i am selecting that content into a text-box. but now i want to select a content by arrow keys of keyboard.i want to highlight the content on arrow key-press also highlighted content will come in text-box.


for more explanation my text-box simply working as Ajax auto complete text-box but i am using xmlhttp response instead of Ajax controlas i am using dataviews not able to any control


can any body help me?
Posted
Updated 6-Oct-11 6:59am
v2
Rate this:
Please Sign up or sign in to vote.

Solution 1

try handling the onkeydown event
   
Rate this:
Please Sign up or sign in to vote.

Solution 3

Hi,

I write some code for you .check this once.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script language ="javascript" >
        function f1() {

        }
        function f2(tid) {
            
            tid.style.backgroundColor = "White";
            tid.style.color = "red";
        }
        function f3(tid) {
            tid.style.backgroundColor = "";
            tid.style.color = "";
        }
        var tmp = -1;
        function f4() {
            var len = document.getElementById("parntdiv").childNodes.length;

           
            if (parseInt(event.keyCode) == 40) {
                //down
                if (parseInt(tmp) ==parseInt(len)-1) {
                    tmp = 0;
                }
                else {
                    
                        tmp = parseInt(tmp) + 1;
                    
                }
              
             
            }
            if (parseInt(event.keyCode) == 38) {
                //up

                if (parseInt(tmp) <= 0) {
                    tmp = parseInt(len) - 1;
                }
                else {
                    tmp = parseInt(tmp) - 1;
                }

            }
            fq();
        }
        function fq() {
            var len = document.getElementById("parntdiv").childNodes.length;
           
            if (parseInt(tmp) != parseInt(len) - 1) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) + 1]);
            }
            if (parseInt(tmp) == parseInt(len) - 1) {
                f3(document.getElementById("parntdiv").childNodes[0]);
            }

            f2(document.getElementById("parntdiv").childNodes[parseInt(tmp)]);
            document.getElementById("txtsearch").innerText = document.getElementById("parntdiv").childNodes[parseInt(tmp)].innerText;
            if (parseInt(tmp) > 0) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) - 1]);
            }
            if (parseInt(tmp) == 0 || parseInt(tmp) == -1) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(len) - 1]);
            }
            
        }
    </script>
  
    <style type="text/css">
        #txtsearch
        {
            width: 318px;
        }
    </style>
  
</head>
<body>
    <form id="form1" runat="server">
     <div id="dfsdf">
   
       <input type ="text" id="txtsearch" onkeyup="f1()" onkeydown="f4()"   /><br />
       
        <div id="parntdiv" style=" width:318px; background-color :Black ; color:White;">
          <div id="child1" onmouseenter="f2(this)" onmouseout="f3(this)">child one</div>
           <div id="child2" onmouseenter="f2(this)" onmouseout="f3(this)">child two</div>
            <div id="child3" onmouseenter="f2(this)" onmouseout="f3(this)">child three</div>
             <div id="child4" onmouseenter="f2(this)" onmouseout="f3(this)">child four</div>
             <div id="child5" onmouseenter="f2(this)" onmouseout="f3(this)">child five</div>
             <div id="child6" onmouseenter="f2(this)" onmouseout="f3(this)">child six</div>
        </div>
        <br />
        <div id="resdiv" style=" width:318px; background-color :Black ; color:White;"></div>
     </div>
    </form>
</body>
</html>


you can modify it to achieve your requirement.


All the Best
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100