Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Intellisense feature using javascript

    I want to create my own intellisense feature using javascript. (i.e.) When i type letter '.',it should display in drop down box containing predefined list or array.
    The drop down should be displayed only when '.' is typed and the drop down should be visible until either one element is selected or enter is pressed.
    and the process continues.
    I tries Jquery UI autocomplete but didn't work to my expectation.
    Any idea how to achieve it.
    Thanks in advance

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Code:
    <input type = "text" id = "txt1" onkeyup = "chk(event)">
    <br><br>
    
    <div id = "mydiv" style="display:none">
    
    <select id = "mysel" onchange = "getValue()">
    <option value = "">Choose ...</option>
    <option value = "A">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "D">D</option>
    </select>
    </div>
    
    <script type = "text/javascript">
    
    function chk(ev) {
    var key;
    ev = ev || event;
    key = ev.keyCode;
    if (key == 13) {  // enter key
    document.getElementById("mydiv").style.display="none";  // hide the select list if enter key is pressed
    return false;
    }
    
    var x = document.getElementById("txt1").value;
    var len = x.length;
    var last =  x.charAt(len-1);
    if (last == ".") {
    document.getElementById("mydiv").style.display="block"; // show the select list
    document.getElementById("txt1").value = x.substring(0,len-1); // erase the final period
    }
    }
    
    function getValue() {
    var val = document.getElementById("mysel").value;
    if (val != "") {
    alert ("You chose " + val);  // for testing;
    document.getElementById("mydiv").style.display="none";  // hide the select list
    }
    }
    
    </script>
    Caller: "I deleted a file from my PC last week and I have just realised that I need it. If I turn my system clock back two weeks will I have my file back again?".
    Last edited by Philip M; 07-10-2012 at 12:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •