jQuery UI Autocomplete参数未被识别为字符串问题求助

核心问题分析 #

你遇到的[Object object]是因为jQuery UI Autocomplete的source函数第一个参数不是直接的查询字符串，而是包含term属性的request对象，直接把这个对象和URL拼接就会显示对象的字符串形式。另外代码里还有两处细节问题影响功能：

具体修正步骤 #

1. 正确获取查询文本
   将source函数里的query参数改为request，通过request.term拿到用户输入的字符串。

2. 修正元素选择器
   在each循环内，用$(this)指代当前的#search元素，而非重复调用$("#search")，避免多元素场景下的冲突。

3. 传递查询参数给后端
   AJAX请求需要把用户输入的查询内容传给后端，否则返回的是全量数据而非匹配结果，可通过data参数或拼接URL实现。

4. 调用回调函数渲染结果
   拿到AJAX响应后，必须调用cb函数把数据传给Autocomplete组件，下拉列表才会显示匹配项。

修正后的完整代码 #

import algoliasearch from 'algoliasearch/lite';
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';

const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
$(document).ready(function() {
    $("#search").each(function () {
        const $input = $(this);
        const autocompleteUrl = $input.attr('autocomplete-url');
        console.log('autocomplete vaut ' + autocompleteUrl);
        
        $input.autocomplete({
            hint: false,
            source: function(request, cb) {
                const userQuery = request.term;
                console.log(autocompleteUrl + userQuery);
                
                $.ajax({
                    url: autocompleteUrl,
                    data: { q: userQuery },
                    dataType: 'json'
                }).then(function (data) {
                    console.log(data);
                    cb(data);
                }).catch(function(err) {
                    console.error('请求失败:', err);
                    cb([]);
                });
            }
        });
    });
});

额外提示 #

你同时引入了Algolia的Autocomplete和jQuery UI的Autocomplete，两者可能存在命名冲突，如果不需要Algolia的功能，可以移除对应的import语句，避免潜在问题。

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