JS: input field and dropdown option change

Question

I am building my own dropdown options with input field as below:

<input class="search" type="text">
<div class="dropdown">
  <div class="option" data-options="1">1</div>
  <div class="option" data-options="2">2</div>
  <div class="option" data-options="3">3</div>
  <div class="option" data-options="4">4</div>
  <div class="option" data-options="5">5</div>
</div>

I am little baffled with two functions:

1. When you are in the "input" field, I want to be able to use arrow keyboard button (down or up button) to select one of the options (option css change like .option:hover{background:black; color:white;}and 2. show in the input field as you press the arrow button on the keyboard.

Any suggestions will be much appreciated.

Thank you.

Did you try to write something? Is there a specific reason you build your own and not use some lib for that? jquery-ui for example, combined with regular input — Dekel
– Dekel, Commented Jul 25, 2016 at 0:02
I might look into the jquery-ui for this. Thank you. And I am trying to use input field as a part of the selection function. — Steve Kim
– Steve Kim, Commented Jul 25, 2016 at 0:07

Daebak · Accepted Answer · 2016-07-25 00:37:55Z

Please check if it's ok click into the input and use key arrow up and down for navigate.

$(document).ready(function(){
	window.displayBoxIndex = -1;

	$("#search").keyup(function(e) {
		if (e.keyCode == 40) {  Navigate(1); }
		if(e.keyCode==38) { Navigate(-1); }
	});
                   
	var Navigate = function(diff) {
		$('#search').val('');
		displayBoxIndex += diff;
		var oBoxCollection = $(".option");
		if (displayBoxIndex >= oBoxCollection.length) {
			displayBoxIndex = 0;			
		}
		if (displayBoxIndex < 0) {
			displayBoxIndex = oBoxCollection.length - 1;
		}
		var cssClass = "option_box_hover";
		oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
		var optionsel = $(".option_box_hover").attr('data-options');
		$('#search').val(optionsel);
	}
	

});

.option_box_hover, .option_box:hover
{
  background:black;
  color:#FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input id="search" class="search" type="text">
<div class="dropdown">
  <div class="option" data-options="1">1</div>
  <div class="option" data-options="2">2</div>
  <div class="option" data-options="3">3</div>
  <div class="option" data-options="4">4</div>
  <div class="option" data-options="5">5</div>
</div>

cheers!!

Collectives™ on Stack Overflow

JS: input field and dropdown option change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related