无法获取autocomplete字段值：附相关代码寻求技术解决方案

看起来你遇到的核心问题是箭头函数导致this指向错误，再加上几个潜在的配置问题，让autocomplete的选择事件无法正确触发并获取值。下面一步步帮你解决：

1. 箭头函数的this绑定问题 #

你用了箭头函数作为autocompleteselect的事件处理函数：

$('.airport_field_destination').on('autocompleteselect', (event, ui) => {
  var id = Number($(this).attr('data-number'))
  // ... 其他代码
});

箭头函数不会绑定自己的this，它的this继承自外层的执行上下文，所以这里的$(this)根本不是触发事件的那个输入框元素，自然拿不到data-number属性值。

修复方案： #

把箭头函数改成普通函数，或者用event.target来获取当前触发事件的元素：

方案A：改用普通函数

$('.airport_field_destination').on('autocompleteselect', function(event, ui) {
  var id = Number($(this).attr('data-number'));
  $(`#search_legs_${id + 1}_origin_text`).val(ui.item.value);
  $(`#search_legs_${id + 1}_origin_id`).val(ui.item.id);
});

方案B：在箭头函数中使用event.target

$('.airport_field_destination').on('autocompleteselect', (event, ui) => {
  var id = Number($(event.target).attr('data-number'));
  $(`#search_legs_${id + 1}_origin_text`).val(ui.item.value);
  $(`#search_legs_${id + 1}_origin_id`).val(ui.item.id);
});

2. 检查HTML的class属性拼写 #

你提供的HTML片段里写的是clas...，这明显是拼写错误，正确的应该是class="airport_field_destination"，否则jQuery选择器.airport_field_destination找不到这个元素，事件绑定根本不会生效：

<input type="text" name="search[legs][0][destination_text]" id="search_legs_0_destination_text" value="London (LON), England" class="airport_field_destination" data-number="0">

注意还要确保输入框有data-number属性，否则Number($(this).attr('data-number'))会得到NaN。

3. 确保引入了jQuery UI Autocomplete #

你只引入了jQuery，但Autocomplete是jQuery UI的组件，不是jQuery核心的一部分。所以需要额外引入jQuery UI的脚本和样式，否则autocomplete功能本身就无法工作：

<!-- 先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入jQuery UI脚本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- 引入jQuery UI样式（可选但建议，让autocomplete下拉框正常显示） -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

4. 验证Autocomplete是否正确初始化 #

最后要确保你已经对.airport_field_destination元素初始化了autocomplete，比如：

$('.airport_field_destination').autocomplete({
  source: [/* 你的数据源，比如机场列表 */],
  // 其他配置项
});

如果没有这一步，autocompleteselect事件根本不会被触发。

测试步骤 #

1. 按上面的步骤修复代码和HTML
2. 打开浏览器开发者工具（F12），切换到Console标签，检查有没有报错
3. 选择autocomplete的选项，查看目标输入框是否正确填充了值

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