使用Rest API时jQuery autocomplete输入无显示问题求助

核心问题 #

1. 异步请求时序错误：你在keyup事件中直接初始化autocomplete，但AJAX请求是异步的，此时songData还未被接口返回的数据填充，导致初始化时数据源为空。后续接口返回数据后，也没有触发autocomplete的更新。
2. 依赖缺失：jQuery核心库本身没有autocomplete()方法，这个功能属于jQuery UI组件，你未引入jQuery UI的情况下，该方法实际无法正常工作，之前的“部分生效”属于异常场景。

方案一：引入jQuery UI并修正逻辑 #

这是最简便的方案，利用jQuery UI原生的autocomplete组件实现需求：

1. 首先引入jQuery UI的CSS和JS文件
2. 修正代码，通过source选项处理异步请求，只初始化一次组件：

// 初始化autocomplete组件，用source处理异步数据拉取
$('#song').autocomplete({
  source: function(request, response) {
    // request.term为输入框当前的关键词
    $.ajax({
      type: 'GET',
      url: '/api/songs?query=' + request.term
    }).then(function(res) {
      // 将接口返回的歌曲名称转换为数组，传给autocomplete组件
      const songNames = res.data.map(song => song.name);
      response(songNames);
    });
  },
  minLength: 1 // 设置至少输入1个字符才触发请求，减少无效请求
});

该方案中，jQuery UI会自动处理输入事件、请求触发、下拉列表渲染及选中逻辑，无需手动管理组件状态。

方案二：不引入jQuery UI，手动实现简单Autocomplete #

如果不想依赖jQuery UI，可以手动实现基础的自动补全功能：

HTML结构

<input type="text" id="song">
<!-- 用于显示下拉结果的容器 -->
<ul id="autocomplete-dropdown" style="display: none; position: absolute; border: 1px solid #eee; background: #fff; list-style: none; padding: 0; margin: 0; width: 100%;"></ul>

JavaScript代码

const $input = $('#song');
const $dropdown = $('#autocomplete-dropdown');

// 监听输入框输入事件
$input.on('keyup', function() {
  const query = $(this).val().trim();
  
  // 关键词为空时隐藏下拉框
  if (!query) {
    $dropdown.hide().empty();
    return;
  }

  // 发起接口请求
  $.ajax({
    type: 'GET',
    url: '/api/songs?query=' + query
  }).then(function(res) {
    const songs = res.data;
    $dropdown.empty();

    // 无结果时隐藏下拉框
    if (songs.length === 0) {
      $dropdown.hide();
      return;
    }

    // 生成下拉列表项
    songs.forEach(song => {
      const $item = $('<li>').text(song.name).css({
        padding: '8px 12px',
        cursor: 'pointer',
        borderBottom: '1px solid #eee'
      });
      
      // 点击列表项填充输入框并隐藏下拉
      $item.on('click', function() {
        $input.val(song.name);
        $dropdown.hide();
      });
      
      $dropdown.append($item);
    });

    // 定位下拉框到输入框下方并显示
    const inputRect = $input[0].getBoundingClientRect();
    $dropdown.css({
      top: `${inputRect.bottom + window.scrollY}px`,
      left: `${inputRect.left + window.scrollX}px`,
      width: `${inputRect.width}px`
    }).show();
  });
});

// 点击页面其他区域隐藏下拉框
$(document).on('click', function(e) {
  if (!$(e.target).closest('#song, #autocomplete-dropdown').length) {
    $dropdown.hide();
  }
});

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