Chaining jquery keydown event

Question

I am trying to create a drop down like functionality where a div is shown once somebody starts typing in the input box. I am able to attach mouse click event on the individual elements to select them. But I am not able to select them via pressing enter.

HTML

<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" /> <div class="autofill"> <ul class="autocomplete"> <li class="autocomplete-list">John Doe (San Jose, CA)</li> <li class="autocomplete-list">Jane Doe (San Francisco, CA)</li> <li class="autocomplete-list">John Jane (San Carlos, CA)</li> </ul> </div>

JQuery

$(document).ready(function () { var $listItems = $('li.autocomplete-list'), $div = $('div.autofill'), $input = $('#example'); $div.hide(); $('input#example').on('keydown', function (e) { var key = e.keyCode, $selected = $listItems.filter('.selected'), $current; $div.show(); if (key != 40 && key != 38) return; $listItems.removeClass('selected'); if (key == 40) { // Down key if (!$selected.length || $selected.is(':last-child')) { $current = $listItems.eq(0); } else { $current = $selected.next(); } } else if (key == 38) { // Up key if (!$selected.length || $selected.is(':first-child')) { $current = $listItems.last(); } else { $current = $selected.prev(); } } $current.addClass('selected'); // When I press enter after selecting the li element // Does not work :( $current.on('keypress keydown keyup', 'li', function (event) { if (event.keyCode == 13) { var value = $(this).text().split('(')[0].trim(); $input.val(value) ; $div.hide(); } }); }); // If somebody clicks on the li item $('li.autocomplete-list').on('click', function (e) { var value = $(this).text().split('(')[0].trim(); $input.val(value); $div.hide(); }); // change color on hover $('li.autocomplete-list').hover( function(){ $(this).addClass('hover') }, function(){ $(this).removeClass('hover') } ); // When I press enter after selecting the li element // Does not work :( $('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) { if (event.keyCode == 13) { var value = $(this).text().split('(')[0].trim(); $input.val(value) ; $div.hide(); } }); });

How can I select a particular li element and then take its value when press enter? Here is the JSFiddle

Jordan P · Accepted Answer · 2015-05-06 00:58:24Z

The <li> element doesn't have focus, even though it's selected visually. The text input still has focus.

You need to check for the enter key on the text <input>. Not on the <li>

$('input#example').on('keydown', function (e) { //... var key = e.keyCode if (key == 40) { // Down key //... } else if (key == 38) { // Up key //... } else if (key == 13) { // Enter key //... make sure $current is not null } //... }

Also be careful of this statement

 if (key != 40 && key != 38) return;

Which will return from the event handler when the enter key is pressed.

Here's a fiddle: http://jsfiddle.net/q1vtwtdp/4/

Thanks for your answer. Yes, i have tried that already. If you check for $current and key == 13, then it still does not solve my purpose because I dont get the value of selected element. Am I missing there something ?
I figured out my issue. Your pointer was correct for ignoring the return statement on key 38 and 40 . Here is the solution: jsfiddle.net/q1vtwtdp/17

Kang · Accepted Answer · 2015-05-06 01:49:34Z

Jordan P is correct, the handling of the list should all happen within the keydown handler function of the input.

$('input#example').on('keydown', function (e) { var key = e.keyCode, $selected = $listItems.filter('.selected'), $current; $div.show(); $listItems.removeClass('selected'); if (key == 40) { // Down key if (!$selected.length || $selected.is(':last-child')) { $current = $listItems.eq(0); } else { $current = $selected.next(); } } if (key == 38) { // Up key if (!$selected.length || $selected.is(':first-child')) { $current = $listItems.last(); } else { $current = $selected.prev(); } } if (key == 13) { var value = $('.autocomplete-list').html().split('(')[0].trim(); $input.val(value); $div.hide(); $current = $selected } $current.addClass('selected'); });

So you don't need:

$('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) { if (event.keyCode == 13) { var value = $(this).text().split('(')[0].trim(); $input.val(value) ; $div.hide(); } });

Working JSFiddle

Thanks for answering. Yes I did the same thing and posted my answer in new jsfiddle link in comments to Jordan's answer: jsfiddle.net/q1vtwtdp/17

Collectives™ on Stack Overflow

Chaining jquery keydown event

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related