jquery autocomplete控件无法匹配

Posted 2023-04-16

使用该控件时在页面加载时设置了数据没问题，但现在我需要实现根据一个文本域的值动态查询，即文本域为A，自动匹配对象为B，在输入A的内容后，我通过jquery post方法（返回一个json数组，例如["1", "2", "3"]）到后台查询与之相关的B自动匹配所需要的内容，然后实现B的自动完成，如下：
$("#B").autocomplete(data,
matchContains: true,
scroll: true,
mustMatch: true,
formatItem: function(row)
return row[0];
,
formatResult: function(row)
return row[0];
,
formatMatch: function(row)
return row[0];


最终在B中输入内容后能查询到列表但点击具体一个数据项后就是无法在B中显示，mustMatch为false时是可以的，请各位大虾帮帮忙，看看到底是什么情况

参考技术A 修改
formatResult: function(row)
return row[0].要显示在文本框的子字段;
,

jQuery Autocomplete 无法通过 AJAX 工作

【中文标题】jQuery Autocomplete 无法通过 AJAX 工作

【英文标题】：jQuery Autocomplete not working via AJAX

【发布时间】：2019-01-24 08:16:04

【问题描述】：

我已经从 https://github.com/devbridge/jQuery-Autocomplete 合并了 jQuery Autocomplete 库

在服务器 (Laravel) 上，我将响应格式化如下：

Route::get('/api/v1/products', function() 
    foreach(App\Product::all() as $product) 
        $products[] = [
            'value' => $product->name,
            'data'  => $product->id
        ];
    

    return response()->json($products)->header("Access-Control-Allow-Origin", "*");
);

这会产生以下响应：

[

"value": "Test Product 1",
"data": 1
,

"value": "Skateboard",
"data": 23
,

"value": "Surfboard",
"data": 24

]

为了让库使用数据，我使用以下代码：

jQuery('#product-search').autocomplete(
            serviceUrl: '/api/v1/products',
            onSelect: function (suggestion) 
                alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            
        );

输入后，控制台返回此错误：

我已经添加了 Access-Control-Allow-Origin 标头以确保没有 CORS 错误。除此之外，我不确定为什么会收到此错误。

我还确保 json 响应的格式正确。

我错过了什么？

【问题讨论】：

html 是动态生成的，我的意思是通过 ajax 响应？

@VasimVanzara 我不明白你的意思。

你必须确定控制是否真的存在？

对于 Access-Control-Allow-Origin，您可以使用 this package

控制台消息是什么意思？

【参考方案1】：

错误在于您返回响应的方式。您只需返回一个包含建议的数组，但是，如果您查看 source code，插件需要一个名为 suggestions 的对象，如下所示：

"suggestions": ["value": "xxx", data: 1, "value": "xxx", data: 1 /* ... */]

所以你必须改变你的路线：

return response()->json($products)->header("Access-Control-Allow-Origin", "*");

到：

return response()->json(['suggestions' => $products])->header("Access-Control-Allow-Origin", "*");