javascript - 从自定义列表中获取对应的值

Question

我正在尝试为输入元素创建自定义下拉列表。我希望能够选择预定义值之一进行输入，并且还允许用户通过键入来输入自己的选择。正如您在示例中看到的那样，它可以工作，但如果我有多个带下拉列表的输入，则它不起作用。

所以问题是如何使之成为可能？

$(document).ready(function() {
// dropdown for inputs
var getDataAttr;
$(document).on('focus click', '.input', function(event) {
    $(event.target).next('.dd_items').show();
});
$(document).on('click', '.choose_val', function() {
    $(".input").val($(this).text());
    $('#new-types').fadeOut();
});
$(document).on('focusout', '.input', function () {
    $(event.target).next('.dd_items').hide();
});
});

.wrap {
  position: relative;
  display: inline-block;
  width: 250px;
}

.input {
  width: 220px;
  height: 30px;
}

.dd_items {
  background-color: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 34px;
  min-width: 220px;
}
.dd_items__item {
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 16px;
}
.dd_items__item:last-child {
  border-bottom: 0;
}
.dd_items__item:hover {
  background-color: #ddd;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
      <input type="text" id="first" class="input" data-dropdown="#add_new_type">
      <ul id="new-types" style="display: none" class="dd_items">
      <li data-id="1" class="choose_val dd_items__item">Sirst value</li>
      <li data-id="2" class="choose_val dd_items__item">Second value</li>
      </ul>
    </div>
    <div class="wrap">
        <input type="text" id="first" class="input" data-dropdown="#add_new_type">
        <ul id="new-types" style="display: none" class="dd_items">
        <li data-id="1" class="choose_val dd_items__item">Sirst value</li>
        <li data-id="2" class="choose_val dd_items__item">Second value</li>
        </ul>
     </div>

Answer 1

所以 @linkinTED 给了你很好的评论和答案，基于这里是使用 data-* 的解决方案。

$(document).ready(function() {
  // dropdown for inputs
  var dataName = 'dropdown'; 
  var dataAttr;
  
  $(document).on('focus click', '.input', function() {
    dataAttr = $(this).data(dataName);
    $(document).find(dataAttr).show();;
  });
  $(document).on('click', '.choose_val', function() {
    $('.input[data-dropdown="'+dataAttr+'"]').val($(this).text());
  });
  $(document).on('focusout', '.input', function() {
    $('.new-types').fadeOut();
  });
});

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

<ul style="display: none" class="dd_items new-types" id="add_date">
    <li data-id="1" class="choose_val dd_items__item">Date First value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Second value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Third value</li>
    <li data-id="2" class="choose_val dd_items__item">Date Fourth value</li>
  </ul>
<div class="wrap">
  <input type="text" id="second" class="input" data-dropdown="#add_date">
  
</div>
<div class="wrap">
  <input type="text" id="third" class="input" data-dropdown="#add_new_type">
  
</div>

  <ul style="display: none" class="dd_items new-types" id="add_new_type">
    <li data-id="1" class="choose_val dd_items__item">Third First value</li>
    <li data-id="2" class="choose_val dd_items__item">Third Second value</li>
  </ul>