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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts

    Detect keystroke during live search

    Hello !

    I have an ajax "live" search (using a simple input field) that returns a table with a list of players, in a div, as you type (onkeyup).

    But I would like to call another javascript function (after the results are displayed, basically when readystate = 4) but only if the user press "Enter" on his keyboard.

    Now how would I catch that keystroke and where would I call this function in my ajax process ?

    Any help would be much appreciated!
    Thanks in advance!
    Chuck Norris counted to infinity.
    Twice.

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Something like this, maybe?

    Code:
    window.onkeydown=function(e)
    {
    	var key = e ? e.which : window.event.keyCode;
    	if(key == 13) {
    		//enter pressed
    	}
    };

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hi Nile, thanks for the reply.

    Yes something like that. But my main issue is where do I implement that in my existing code? Also I would like the event to occur only if I press enter while the focus is on the search input field, not on the whole window.

    The problem is that the ajax search function is called each time a key is pressed in the search input field. So I would need to do the search only if another key is pressed but if "enter" is pressed, then I would call another function to display the first row details.

    Actually my dream would be to be able to retrieve that table through an ajax search, then if for example the search returns 5 rows, I would be able to navigate through each row using the keyboard (up and down arrows) and select the record I want to display the details for by pressing "enter".

    I have no idea if this is feasible. If someone could point me to the right direction, that would be great!

    A quick example of what I want to achieve would be something like that:

    - Input field onkeyup calls javascript function ->
    - Check which key was pressed ->
    - If standard character is entered -> ajax search
    - If key 38 (up arrow) -> navigate up in table and highlight the row
    - If key 40 (down arrow) -> navigate down in table and highlight the row
    - If key 13 (enter key) -> call 2nd function to display details

    TIA
    Chuck Norris counted to infinity.
    Twice.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    I first thought I would be able to do that by myself (with CF contribution), without using too much code but I think this is harder than expected.

    Finally I found a table navigation script here:
    http://projects.arkanis-development....le_navigation/
    (involves jquery and quite a lot of code, but it does what I want)

    I am calling this script after the readystate==4 but added a little timeout to the tableNavigation functions so I am able to enter a few letters in my search field before the focus is set to the table to allow keyboard navigation.

    -> setTimeout('jQuery.tableNavigation()', 1000);

    Thread closed!

    Best regards,
    A.
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

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