SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ajax, text fields, and google suggest

    I have a site setup that uses ajax to create a suggest popup like google suggest. As the user types in each letter, it pops up a div that lists the possible suggestions that the user can select to populate the text field. It works fine, but in order to select a suggestion, I have to select the suggestion with the mouse. However, I would like the ability to use the arrow keys to select the suggestions. Can anyone offer any help on how to handle this?

  2. #2
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first of all here is good resource http://developer.yahoo.com/ypatterns...n=autocomplete what autocomplete should do.

    when i did my autocomplete i created:
    1. create object ac
    2. create method dispatcher
    3. creae method handleUp
    4. creae method handleDown


    dispatcher will get all of the keys pressed and use switch statement to call different functions

    i would also have internal array of words that match what user typed

    list under the input box should be something like that
    <div>
    <a>option1</a>
    <a>option1</a>
    <a>option1</a>
    ...
    </div>

    thinking(pseudo) code below
    ------------------------------------------------------------------
    PHP Code:
    var keys={
        
    ENTER:13,
        
    BACKSPACE:8,
        
    ESC:27,
        
    TAB:9,
        
    SPACE:32,
        
    DELETE:46,
        
    CAPS_LOCK:20,
        
    KEY_A:65KEY_B:66KEY_C:67KEY_D:68KEY_E:69KEY_F:70KEY_G:71KEY_H:72KEY_I:73KEY_J:74KEY_K:75KEY_L:76KEY_M:77KEY_N:78KEY_O:79KEY_P:80KEY_Q:81KEY_R:82KEY_S:83KEY_T:84KEY_V:85KEY_U:86KEY_W:87KEY_X:88KEY_Y:89KEY_Z:90,
        
    SHIFT:16CTRL:17ALT:18,
        
    ARROW_LEFT:37ARROW_RIGHT:39ARROW_UP:38ARROW_DOWN:40,
        
    F1:112F2:113F3:114F4:115F5:116F6:117F7:118F8:119F9:120F10:121F11:122F12:123,
        
    NUM_0:48NUM_1:49NUM_2:50NUM_3:51NUM_4:52NUM_5:53NUM_6:54NUM_7:55NUM_8:56NUM_9:57
    };

    function 
    dispatch(){
               switch(
    e.keyCode){
            case 
    keys.TAB:
            case 
    keys.ENTER:
                
    handleEnter();
                return;
            case 
    keys.ESC:
                
    haideField();
                return;
            case 
    keys.ARROW_UP:
                
    handleUp();
                return;
            case 
    keys.ARROW_DOWN:
                
    handleDown();
                return;
            default:
                break;
        }
    }

    function 
    handleDown(){

    remove class(.selectedfrom previous element(a tag);
    increment selected;
    form.input=internal array[selected];
    add class(.selectedto next element(a tag);


    ---------------------------------
    and then add styles:

    .selected{background: yellow;}


Bookmarks

Posting Permissions

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