CODEWITHSUNDEEP
jqueryhtml-lists
Roobie
Roobie

Reputation: 1406

How to move Focus from a Text input field to the first LI of an UL?

I'm trying to move the mouse focus from a text field to the first LI of an UL which appears right below the text field. I'd like to be able to scroll up/down the list and ENTER to select an entry/row. After the ENTER key is hit, some values from the row are used to populate the other fields.

The text field has the onKeyUp trigger on it, which makes things a little bit tricky. I need this trigger as I need to query the database as the user types.

The result I'd like to achieve is similar to google.com search. If you go to google.com in Firefox you see what I mean.

I've tried something like

$("#myUL").find('li').first().focus().addClass('some-class');

but it didn't work.

How can I move the focus to the UL?

Here's my jsfiddle http://jsfiddle.net/98xUZ/

Thanks in advance for your help!

Upvotes: 0

Views: 1113

Answers (2)

ss ulrey
ss ulrey

Reputation: 310

For the up/down arrow piece, you generally want to avoid coding to those events if you can help it. Best option is setting tabindex attribute on the li tags and responding to the focus events.

Upvotes: 0

Ashish-Joshi
Ashish-Joshi

Reputation: 231

I tried this in function :

function buildList(pThis) {

//    console.log(window.event.keyCode + " is pressed");

    var ul = $('#stnUL');
    var li = "";
    ul.empty('li');

    loc = dataObj.locations;

    li = '<li class="liHeading"><span class="liLocId">LocID</span><span class="liLocName">Name</span></li>';

    $.each(loc, function (i, o) {

        li += '<li tabindex="' + i + '" class="liLocList" onMouseOver="javascript:mOver(this);" onMouseOut="javascript:mOut(this);"><span class="liLocId">' + loc[i].locId + '</span><span class="liLocName">' + loc[i].name + '</span></li>';

    });

    $(ul).append(li);
    var itemPosArr = getItemBottomLeft(pThis.id);
    displayUL('ulDiv', itemPosArr[0], itemPosArr[1]);
    $("#ulDiv").show();
     $( "ul li" ).first().removeClass().css("background-color", "");   
    $( "ul li" ).first().addClass('active');

}

Upvotes: 2

Related Questions