CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HiddenMarkow
HiddenMarkow

Reputation: 613

How to have combobox with jquery such that there is an input box and select dropdown attached to it

I am new to jquery. Is there a way such that when I press the arrow down beside the 'input' box (see my snippet below) the 'select' drop down is populated below the 'input' field. On the press of arrow down I would like to make a call to get the 'option' values for the dropdown which I have figured out but I don't know how to attach them as a drop down to the 'input' field. On selecting a value from the dropdown it must populate in input box.

I cannot use only a dropdown with a 'select' because I want to allow the user to enter values which may not be the values from dropdown. Dropdown is just to give probable values.

I have tried 'datalist' which is really easy to implement in my case and exactly fits the use case but its not supported everywhere and I had to drop that solution.

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
<input type="text" name="inputVal">
<i class="down"></i>
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 1

Views: 160

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

According to your requirement it will be better to use <ul> instead of select

$(".down").on("click", function() {
  $("ul").slideDown("fast");
})
$("ul li").on("click", function() {
  $("input").val($(this).text())
  $("ul").slideUp("fast");
})
.wrapper {
  font: 13px Verdana;
  width: 150px;
  position: relative;
}

.input {
  position: relative;
}

.input input {
  font: 13px Verdana;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
}

.input i {
  position: absolute;
  right: 5px;
  top: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  cursor: pointer;
}

ul {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
  top: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: none;
}

ul li {
  padding: 5px;
  cursor: pointer;
}

ul li:hover {
  background: black;
  color: #fff;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="wrapper">
  <div class="input">
    <input type="text" name="inputVal">
    <i class="down"></i>
  </div>
  <ul name="cars">
    <li>Volvo</li>
    <li>Saab</li>
    <li>Fiat</li>
    <li>Audi</li>
  </ul>
</div>

Upvotes: 1

4b0
4b0

Reputation: 22323

You can use length of option to open dropdown when arrow click and change for dropdown option change to select value on input.

var myDropDown = $('select[name="cars"]');
var length = $('select[name="cars"] > option').length;
$(".down").one("click", function() {
  myDropDown.attr('size', length);
});
$('select[name="cars"]').change(function() {
  $('input[name="input"]').val($(this).val());
 });
i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input">
<i class="down"></i>
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 1

Related Questions