如何合并函数并传递数据？实现无下拉式输入框自动补全

我完全懂你的需求——就是要把原本依赖静态数组的自动补全功能，改成用后端数据库动态返回的结果，对吧？咱们直接把两段代码整合起来，替换掉静态的haystack数组就行，下面是具体的实现方案：

核心思路 #

原来的代码里，一段是通过$.get从后端获取数据并转换成数组，另一段是用suggest绑定静态数组。我们需要把这两步结合：在用户输入时动态请求后端数据，然后把返回的数组传给suggest作为数据源。

修改后的完整代码 #

var path = "{{ route('autocomplete') }}";
var debounceTimer; // 用于防抖的定时器

$(function(){
  // 先初始化suggest，用空数组占位
  $('#search').suggest([], {});

  // 监听输入框的输入事件，实时更新补全数据
  $('#search').on('input', function() {
    // 清除之前的定时器，避免频繁请求
    clearTimeout(debounceTimer);
    var currentQuery = $(this).val();
    var $searchInput = $(this);

    // 防抖：用户停止输入300ms后再发请求
    debounceTimer = setTimeout(function() {
      // 如果输入为空，清空补全列表
      if (currentQuery.trim().length === 0) {
        $searchInput.suggest([], {});
        return;
      }

      // 发送请求到后端获取动态数据
      $.get(path, { query: currentQuery }, function(data) {
        // 把后端返回的数据转换成我们需要的格式（提取name_full字段）
        var dynamicAutocompleteData = data.map(function(item) {
          return item.name_full;
        });
        console.log('动态补全数据:', dynamicAutocompleteData);
        // 更新suggest的数据源
        $searchInput.suggest(dynamicAutocompleteData, {});
      }).fail(function() {
        // 请求失败时的处理，比如清空补全列表
        console.error('获取补全数据失败，请检查后端接口');
        $searchInput.suggest([], {});
      });
    }, 300);
  });
});

代码说明 #

• 初始化占位：一开始给suggest传空数组，避免页面加载时出现异常。
• 防抖处理：加了300ms的延迟定时器，用户快速输入时不会频繁触发后端请求，减少服务器压力，也让体验更流畅。
• 动态更新数据源：每次用户输入（或停止输入后），请求后端拿到数据，转换成name_full的数组，再传给suggest更新补全列表。
• 异常处理：增加了请求失败的回调，避免出错后页面无响应。

额外提示 #

• 确保后端的autocomplete路由能正确接收query参数，返回包含name_full字段的JSON数组。
• 如果你的suggest插件支持动态更新数据源的其他方式，可以根据插件文档调整，但上面的方法是通用的适配方案。

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