如何复用jQuery Autocomplete实现多组输入框关联赋值？

我有多个输入框组，每组包含一个需要Autocomplete功能的输入框（class为batter）和一个用于存储选中项ID的文本输入框。目前代码仅对第一组（birds1/birds1id）有效，希望无需重复编写Autocomplete代码，让所有现有组及后续新增的组都能正常工作——当用户选中Autocomplete选项时，自动将对应组的ID输入框值设置为选中项的id。

现有代码如下：

<script>
  $(function () {
      $(".batter").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: "getplayersAjax.aspx",
                  dataType: "jsonp",
                  data: {
                      term: request.term,
                      league: 11
                  },
                  delay: 400,
                  success: function (data) {
                      response(data);
                  }
              });
          },
          minLength: 3,
          select: function (event, ui) {
              $("#birds1id").val(ui.item.id);
          }
      });
  });
</script>

<div class="ui-widget">
  <input id="birds1" class="batter"><input type="text" id="birds1id" />
</div>
<div class="ui-widget">
  <input id="birds2" class="batter"><input type="text" id="birds2id" />
</div>
<div class="ui-widget">
  <input id="birds3" class="batter"><input type="text" id="birds3id" />
</div>

核心是在select回调中，通过当前触发Autocomplete的输入框（即this）动态找到对应组的ID输入框，避免写死固定选择器。有两种可靠的实现方式：

方法1：通过兄弟元素定位（推荐，更灵活） #

利用jQuery的.siblings()方法，直接找到当前输入框同父容器下的兄弟输入框，无需依赖ID命名规则：

select: function(event, ui) {
  // 当前触发事件的是.batter输入框，找到它同组的文本输入框
  $(this).siblings('input[type="text"]').val(ui.item.id);
}

方法2：通过ID命名规则拼接 #

如果你的ID命名有固定规律（比如birdsX对应birdsXid），可以通过当前输入框的ID拼接出对应ID输入框的选择器：

select: function(event, ui) {
  // 获取当前输入框的ID，拼接出对应的ID输入框选择器
  const targetId = $(this).attr('id') + 'id';
  $('#' + targetId).val(ui.item.id);
}

完整修改后的代码 #

<script>
  $(function () {
      $(".batter").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: "getplayersAjax.aspx",
                  dataType: "jsonp",
                  data: {
                      term: request.term,
                      league: 11
                  },
                  delay: 400,
                  success: function (data) {
                      response(data);
                  }
              });
          },
          minLength: 3,
          select: function (event, ui) {
              // 这里用方法1的实现，也可以替换成方法2
              $(this).siblings('input[type="text"]').val(ui.item.id);
          }
      });
  });
</script>

<div class="ui-widget">
  <input id="birds1" class="batter"><input type="text" id="birds1id" />
</div>
<div class="ui-widget">
  <input id="birds2" class="batter"><input type="text" id="birds2id" />
</div>
<div class="ui-widget">
  <input id="birds3" class="batter"><input type="text" id="birds3id" />
</div>

这样修改后，所有带batter类的输入框都会自动绑定Autocomplete功能，选中选项时会自动更新对应组的ID输入框，后续新增的同结构输入组也无需额外修改JS代码。

内容的提问来源于stack exchange，提问作者redaxe