-1

I have got a script for suggestion box. Its working great but problem with this I want to modify it for upkey and downkey event. Its just giving suggestion even not working for mouse click event.

function lookup(inputString) {
    if(inputString.length == 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();", 50);
}

HTML

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList"> &nbsp; </div>

As I am new with jquery, may I have idea how to modify it further for mouse click or keyboard arrow keys.

Luwe
  • 3,026
  • 1
  • 20
  • 21
Rahul Singh
  • 1,614
  • 6
  • 22
  • 39

2 Answers2

1

Why reinvent the wheel - have you looked at jquery ui autocomplete? http://jqueryui.com/demos/autocomplete/

Rezler
  • 1,064
  • 1
  • 8
  • 21
  • Can you please provide idea that it search only first character. Suppose in this example it is giving me 3 values that is "AJAX, JAVA, JAVASCRIPT" if I type 'JA' I wish to get only Java and javascript I don't wish to fetch records that are having this string in middle. – Rahul Singh Sep 03 '11 at 10:46
  • So you want a Starts With search rather than a Contains. There are examples of this on SO already. E.g. http://stackoverflow.com/questions/3148195/jquery-ui-autocomplete-use-startswith – Rezler Sep 03 '11 at 12:55
1

I think this may help you with keyboard arrow keys (register key event handling) 

// Handling keybinding keydown.
$(document).keydown(function(e){
        switch(e.keyCode){
            case 38: //this is (UP) pressed down
            // do the action you want.
                break;
        }
});

// Handling keybinding keyup.
$(document).keyup(function(e){
        switch(e.keyCode){
            case 38: //this is (UP) pressed down
            // do the action you want.
                break;
        }
});

this link will help you with the keycode:

http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/javascript-char-codes-key-codes.aspx

Samer Makary
  • 1,815
  • 2
  • 22
  • 25
  • Sorry but I don't have any effect if I use this code. Still their is no effect I can't select value using mouse click or cursor key. – Rahul Singh Sep 03 '11 at 10:56