如何使用jquery组合框，以便有一个输入框和选择的下拉列表

Question

我是jquery的新手。有没有办法让我按下“输入”旁边的箭头。框（请参阅下面的我的代码段）＆＃39;选择＆＃39;下拉列表填入“＆＃39;输入”下面。领域。在按下箭头的时候，我想拨打电话，以获得“选择”选项。我已经弄清楚了下拉菜单的价值，但我不知道如何将它们作为下拉菜单添加到“输入”中。领域。在从下拉列表中选择值时，它必须填入输入框中。

我不能只使用＆＃39;选择＆＃39;因为我想允许用户输入值，这些值可能不是下拉列表中的值。下拉只是为了给出可能的值。

我已经尝试了数据主义者＆＃39;这在我的案例中非常容易实现，并且完全符合用例，但在任何地方都不受支持，我不得不放弃该解决方案。

＆＃13;

＆＃13;

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

点击箭头后，您可以使用length option打开下拉列表，更改dropdown选项更改为选择输入值。

＆＃13;

＆＃13;

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());
 });

＆＃13;

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据您的要求，最好使用<ul>代替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>