jQuery选择器，用于根据当前上下文设置输入值-解网

问：

我有几个输入，我想提供相同的jQuery自动完成功能。

当用户选择一个选项时，我想将相应文本框的值设置为选择的 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>

该代码适用于 birds1/birds1id 对。

但是，我正在努力弄清楚如何让该函数适用于第二个 birds2/birds2id 对（以及我稍后将添加的其他对），而无需复制自动完成函数。

我认为 #birds1id 选择器需要替换为更通用的东西，但我对如何做到这一点感到茫然。[jQuery初学者在这里]我尝试使用“this”，但似乎无法让它工作。

jquery jquery-selectors

您说得对，您需要替换硬编码的选择器。您可以从对象中获取对已更改输入的引用，该对象是处理程序的第一个参数：。获得该元素后，可以查询其同级元素并设置值。注意：我认为您需要使用来获取值，而不是代码中的值，但也许我错了。处理程序变为：#birds1ideventselectevent.targetui.item.valueui.item.idsuccess

function(event, ui) {
  const $target = $(event.target);
  const $sibling = $target.next();

  $sibling.val(ui.item.value);  
}

这里有一把小提琴供参考。

jQuery选择器，用于根据当前上下文设置输入值

jQuery selector for setting a value of an input based on the current context

评论

评论