jQuery动态字段问题：自动补全失效+选中后显示标签而非值

嘿，我来帮你搞定这两个头疼的问题，咱们逐一拆解：

问题1：动态新增字段无法使用Autocomplete #

你遇到的第一个问题根源有两个：

• 初始代码只给页面加载时就存在的#author-search输入框绑定了autocomplete，动态生成的元素不会自动继承这个绑定
• 你给所有新增的输入框都用了同一个id="author-search"，但HTML里id必须是唯一的，重复id会导致选择器失效

解决思路： #

1. 把输入框的id改成class（比如class="author-search"），这样可以通过类选择器选中所有同类型的输入框
2. 在新增字段之后，立刻给这个新的输入框初始化autocomplete功能

问题2：选中选项后显示Label而非Value #

你当前的select事件里设置了$(this).val(ui.item.value)，这就是显示value的原因，只需要把它改成ui.item.label即可。如果需要保留value（比如提交表单时要用ID），可以额外加一个隐藏输入框来存储value值。

修改后的完整代码 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<table id="sort" class="grid"> 
  <button id='addNew'>Add new field</button> 
  <thead> 
    <tr><th class="index">No.</th><th>Author</th></tr> 
  </thead> 
  <tbody id="add"> 
    <tr class="rem">
      <td class="index">1</td>
      <td>
        <input class="author-search" type="text">
        <!-- 新增隐藏输入框存储value（可选，根据需求决定） -->
        <input type="hidden" name="author_ids[]">
        <button class="delete">Delete</button>
      </td>
    </tr> 
  </tbody> 
</table>

JavaScript部分

$(document).ready(function() { 
  var fixHelperModified = function(e, tr) { 
    var $originals = tr.children(); 
    var $helper = tr.clone(); 
    $helper.children().each(function(index) { 
      $(this).width($originals.eq(index).width()) 
    }); 
    return $helper; 
  }, updateIndex = function() { 
    $('td.index').each(function(i) { 
      $(this).html(i + 1); 
    }); 
  }; 

  $("#sort tbody").sortable({ 
    helper: fixHelperModified, 
    stop: updateIndex 
  }).disableSelection(); 

  // 封装初始化autocomplete的函数，方便重复调用
  function initAutocomplete($input) {
    $input.autocomplete({ 
      source: [{ label: "Tom Smith", value: "1234" }, { label: "Tommy Smith", value: "12321" }], 
      minLength: 3, 
      select: function(event, ui) { 
        event.preventDefault(); 
        // 显示label到输入框
        $(this).val(ui.item.label); 
        // 如果需要存储value，把值写入对应的隐藏输入框
        $(this).siblings('input[type="hidden"]').val(ui.item.value);
      }
    }); 
  }

  // 初始化页面加载时的第一个输入框
  initAutocomplete($('.author-search'));

  $("#addNew").click(function() { 
    // 新增行的时候用class而不是id，同时包含隐藏输入框
    var newRow = `<tr class='rem'>
      <td class='index'>1</td>
      <td>
        <input class='author-search' type='text'>
        <input type='hidden' name='author_ids[]'>
        <button class='delete'>Delete</button>
      </td>
    </tr>`;
    $('#add').append(newRow); 
    // 给新增的输入框初始化autocomplete
    initAutocomplete($('#add').find('.author-search:last'));
    updateIndex(); 
  }); 

  $("body").on('click', '#add .delete', function() { 
    $(this).closest(".rem").remove(); 
    updateIndex(); 
  }); 
}); 

关键改动说明 #

1. 替换id为class：避免重复id导致的选择器问题，同时方便批量选中同类型输入框
2. 封装初始化函数：把autocomplete的初始化逻辑封装成initAutocomplete函数，既可以初始化页面初始的输入框，也能在新增字段后调用
3. 修改select事件逻辑：将输入框的值设置为ui.item.label，同时通过兄弟元素选择器把value存入隐藏输入框（如果不需要存储value可以去掉这部分）
4. 新增字段后立即初始化：每次点击添加按钮后，找到刚新增的输入框，调用初始化函数绑定autocomplete

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