在 jquery ui / autocomplete / source 中使用选择器

Question

假设我有以下 HTML:

<div class="name">
First: <input type="text" name="firstName" class="firstName">
Last: <input type="text" name="lastName" class="lastName">
</div>

这是HTML对应的JS:

$('.lastName').last().autocomplete({
    source: function(request, response) {
    var firstName = $('.firstName', $(this).closest('.name'));
    var lastName = request.term;
    console.log(firstName + ' ' + lastName);
  }
});

我想让自动完成将最接近 .firstName 的 .lastName 字段拉到源方法链接到的 .lastName 字段，但它不起作用。

从表面上看，如果这行不通，我可以将某种唯一 ID 附加到 .lastName，但如果我唯一可以访问的是 request，那么我就不能简单地将 data-whatever 属性添加到 <input> 元素。

有什么想法吗？

这是我的 JS Fiddle：https://jsfiddle.net/f86nLrq9/

Answer 1

考虑以下因素：https://jsfiddle.net/Twisty/39mrzowc/39/

JavaScript

$(function() {
  $('.lastName:last').autocomplete({
    source: function(request, response) {
      var fName = $(this.element).prev().val();
      console.log(fName, request.term);
      response([]);
    },
  });
});

如果您检查 this，您会发现它是对 Autcomplete 实例（数据对象）的引用。大多数小部件都有对元素的引用，请参阅：https://api.jqueryui.com/jQuery.widget/

这意味着 this 不是对元素 input.lastName 的引用；因此，您使用的代码无法正常工作。您的相同代码只需稍作更改即可使用：https://jsfiddle.net/Twisty/yucabv8m/1/

JavaScript

$('.lastName').last().autocomplete({
    source: function(request, response) {
    var firstName = $('.firstName', $(this.element).closest('.name')).val();
    var lastName = request.term;
    console.log(firstName + ' ' + lastName);
  }
});

在 jquery ui / autocomplete / source 中使用选择器

using selectors in jquery ui / autocomplete / source

jquery

jquery-ui

jquery-ui-autocomplete