小编典典

自动完成请求/服务器响应是什么样的?

ajax

这似乎是一个黑洞:经过一个小时的搜索jQuery UI网站,Stack
Overflow和谷歌搜索,我还没有找到有关如何编写AutoComplete 服务器端 的最基本信息。

什么参数传递给服务器,JSON响应应该是什么样?

我一定想念一些东西,因为其他人怎么学到的呢?网站似乎只讨论客户端JavaScript代码,而没有讨论协议或服务器端示例。

我需要足够的资源来使最简单的远程示例正常工作。


阅读 144

收藏
2020-07-26

共1个答案

小编典典

什么参数传递给服务器

您需要传递request.term到服务器端代码(来自文档):

具有单个属性“ term”的请求对象,该属性引用文本输入中当前的值。

基本上,在您的autocomplete代码中,您将具有以下内容:

$("#autocomplete").autocomplete({
    // request.term needs to be passed up to the server.
    source: function(request, response) { ... }
});

JSON响应应该是什么样?

autocomplete小部件需要具有labelvalue属性的JSON对象数组(尽管如果仅指定value,它将用作标签)。因此,在最简单的情况下,您可以仅返回如下所示的数据:

[
    { label: 'C++', value: 'C++' }, 
    { label: 'Java', value: 'Java' }
    { label: 'COBOL', value: 'COBOL' }
]

如果您需要更复杂的东西,可以使用函数的success参数对$.ajax自动完成获取之前返回的数据进行规范化:

source: function( request, response ) {
    $.ajax({
        /* Snip */
        success: function(data) {
            response($.map( data.geonames, function( item ) {
                return {
                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    value: item.name
                }
            }));
         }
    });

这段代码摘自此处的示例(这是在更复杂的场景中ajax +自动完成工作的一个很好的整体示例)。

基本上,要解决的问题是,在成功执行ajax请求后,将使用(对$.map)将接收到的数据规范化为autocomplete小部件期望的数据。

希望有帮助。

2020-07-26