如何获取autocomplete输入框的选中值并传递给第二个输入框

核心修改点 #

• 在$(document).ready作用域内声明变量存储第一个输入框选中的value，实现两个输入框的参数传递
• 修正原代码中$("first-field")、$("second-field")选择器缺失#的语法错误
• 第一个输入框选中后，可根据实际需求选择直接填充第二个输入框，或者动态传入第二个输入框的自动补全请求参数

场景1：直接将第一个选中项的value填充到第二个输入框 #

$(document).ready(function(){
  // 存储第一个输入框选中的value
  let firstSelectedValue = '';

  jQuery('#first-field').autocomplete({
        source:'', // 替换为第一个补全接口地址
        minLength: 2,
        delay:0,
        select: function(event, ui) {
                event.preventDefault();
                $("#first-field").val(ui.item.label);
                // 存储选中的value
                firstSelectedValue = ui.item.value;
                // 直接填充到第二个输入框
                $("#second-field").val(firstSelectedValue);             
        },
        focus: function(event, ui) {
                event.preventDefault();
                $("#first-field").val(ui.item.label);
        }
    });
    
    jQuery('#second-field').autocomplete({
        source:'', // 替换为第二个补全接口地址
        minLength: 2,
        delay:0,
        select: function(event, ui) {
                event.preventDefault();
                $("#second-field").val(ui.item.label);            
        },
        focus: function(event, ui) {
                event.preventDefault();
                $("#second-field").val(ui.item.label);
        }
    });      
});

场景2：第二个输入框的补全源需要携带第一个选中的value作为请求参数 #

将第二个输入框的source改为函数形式，动态拼接请求参数即可：

jQuery('#second-field').autocomplete({
  source: function(request, response) {
    $.getJSON('替换为第二个补全接口地址', {
      term: request.term,
      // 传入第一个输入框选中的value
      firstValue: firstSelectedValue
    }, response);
  },
  minLength: 2,
  delay:0,
  select: function(event, ui) {
          event.preventDefault();
          $("#second-field").val(ui.item.label);            
  },
  focus: function(event, ui) {
          event.preventDefault();
          $("#second-field").val(ui.item.label);
  }
});

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