jQuery autocomplete绑定多个输入框仅首个生效，如何调整代码？

• HTML规范要求元素id属性全局唯一，你给4个输入框设置了相同的id="artists"，jQuery的ID选择器$("#artists")只会匹配到页面中第一个符合的元素，因此只有第一个输入框成功绑定了autocomplete功能
• 原有JS的select、focus回调里写死了用ID选择器修改#artists的值，就算给多个输入框绑定了事件，最终选中的内容也只会填充到第一个输入框中

第一步：修改HTML代码 #

把重复的id替换为统一的类名，保留唯一id（可选，无其他需求可以不设置id）：

<input name="confname1" class="artist-input" value="" placeholder="Conductor name ...">
<input name="confname2" class="artist-input" value="" placeholder="Conductor name ...">
<input name="confname3" class="artist-input" value="" placeholder="Conductor name ...">
<input name="confname4" class="artist-input" value="" placeholder="Conductor name ...">

第二步：修改JS代码 #

1. 把选择器从ID选择器换成类选择器，匹配所有需要绑定autocomplete的输入框
2. 把select、focus回调里的固定ID选择器换成$(this)，指代当前触发事件的输入框

$( function() {
  // 用类选择器匹配所有需要绑定autocomplete的输入框
  $( ".artist-input" )
  .autocomplete({
    source: function( request, response ) {
      // Fetch data
      $.ajax({
        url: "getartists.php",
        type: 'post',
        dataType: "json",
        data: {
          search: request.term
        },
        success: function( data ) {
          response( data );
        }
      });
    },
    select: function (event, ui) {
      // 用$(this)指代当前触发选择事件的输入框
      $(this).val(ui.item.label);
      return false;
    },
    focus: function(event, ui){
      $(this).val( ui.item.label );
      return false;
    },
  });
});

修改完成后所有带artist-input类的输入框都会自动绑定相同配置的autocomplete功能，选中内容也会正确填充到当前操作的输入框中。

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