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

Posted 2023-05-08

【中文标题】在 jquery ui / autocomplete / source 中使用选择器

【英文标题】：using selectors in jquery ui / autocomplete / source

【发布时间】：2021-07-30 03:20:47

【问题描述】：

假设我有以下 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 字段，但它不起作用。

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

有什么想法吗？

这是我的 JS 小提琴：https://jsfiddle.net/f86nLrq9/

【问题讨论】：

真的不清楚你期望它如何工作。通常，您有一系列选择可供选择。该数组将在source 回调中传递给response(array)。在尝试选择姓氏时，您会使用名字做什么？

仅供参考，从相邻的名字中获取值将是 $(this).siblings('.firstname').val()

this 不明确。您必须使用更具体的选择器。

进一步研究，使用$(this.element) 进行正确参考。 this 与实例有关，与元素无关。

【参考方案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，您会发现它是对自动完成实例（数据对象）的引用。大部分的 Widget 都有对 Element 的引用，见：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);
  
);