时间戳

首页 > 解决方案 > 在 jquery ui / autocomplete / source 中使用选择器

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

问题描述

假设我有以下 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/

标签： jqueryjquery-uijquery-ui-autocomplete

解决方案

考虑以下内容：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);
  }
});

推荐阅读