jquery自动完成数据源更改

Posted 2023-04-13

【中文标题】jquery自动完成数据源更改

【英文标题】：jquery autocomplete datasource change

【发布时间】：2011-09-21 02:27:51

【问题描述】：

我已经设置了一个 jquery 自动完成功能，它根据文本框上的输入更改数据源。

jquery 上的数据源更改后，直到按下向上或向下箭头按钮才会触发。

我用firebug检查了数据源，没发现有什么问题。

谁能告诉我如何向控件发送向上或向下箭头键或以任何其他方式解决此问题？

非常感谢！

编辑：我已将其替换为 JSON，如下所示，但似乎请求出现错误警报框

jQuery(函数 () jQuery("input#autocomplete").autocomplete( 内容类型：'应用程序/json；字符集=utf-8', 数据类型：'json'， 必须匹配：假， 限制：10， minChars: 2,

            select: function (event, ui) 
                AutoCompleteSelectHandler(event, ui)
            
            ,
            source: function (request, response) 
                jQuery.ajax(
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: ,
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 
                        alert(data);
                    ,
                    error: function (XMLHttpRequest, textStatus,

errorThrown) 警报（文本状态）； ); );

    );

有这个html输入框。

我在这里做错了什么？我已确认网络服务工作正常。

edit2 ：我进行了如下更改：

jQuery(函数 () jQuery("input#autocomplete").autocomplete(

            minChars: 2,

            select: function (event, ui) 
                AutoCompleteSelectHandler(event, ui)
            
            ,
            source: function (request, response) 
                jQuery.ajax(
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: ' Suburb: "' +

jQuery("#autocomplete").val() + '" ', 数据类型：“json”， 类型：“发布”， contentType: "应用程序/json; charset=utf-8", dataFilter: function (data) return data.d; , 成功：函数（数据） 警报（数据.d）； , 错误：函数（XMLHttpRequest、textStatus、 错误抛出） 警报（文本状态）； ); );

    );

所以警报工作正常。但是 jquery 不显示匹配列表。我该怎么做？

编辑 2：

我已经设法解决了网络服务的问题。如何设置响应以便自动完成相应地显示列表？目前，列表中的每个项目都向我显示了项目的完整列表。

ie ) 如果我输入 'ab' 并且如果有 3 个匹配项，那么它将在 3 个不同的行上显示 3 次相同的结果。

我的 jquery 设置如下：

jQuery(函数 () jQuery("input#autocomplete").autocomplete(

            minChars: 2,

            select: function (event, ui) 
                AutoCompleteSelectHandler(event, ui)
            
            ,
            source: function (request, response) 
                jQuery.ajax(
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: ' Suburb: "' + jQuery("#autocomplete").val() + '" ',
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 

                                                    response($.map(data.d, function (item) 
                                                        return 
                                                            value: data.d
                                                        
                                                                                ))


                    ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) 
                        alert(textStatus);
                    
                );
            
        );

任何帮助将不胜感激，非常感谢！

【问题讨论】：

你的描述几乎没有意义（对我来说）。例如，After datasource on the jquery changes, it doesn't fire until press up or down arrow button。 datasource on jquery 是什么？是什么导致它发生变化？什么是it 没有触发？如果不共享代码，帮助您就像帮助那些说“我正在使用自动完成但它不起作用，请帮助”的人一样不可能。

我在 xmlhttpobject 上使用 request 从页面中获取列表，因此数据源只是一个字符串数组。如果我更改数据源，则不会显示自动完成列表。但是，当我按向上箭头键或向下箭头时，会显示列表。也许我应该尝试将 json 与自定义数据源一起使用。

仍然不清楚，当然也无法重现。如果您设置jsfiddle.net，它将让每个人的生活更轻松，并增加解决您问题的机会

哇，我不知道有这样的工具。让我设置一下，然后通知你。

您可能看不到结果，因为我还没有设置公共数据源页面。所以基本上我已经编写了代码来检测文本框上的按键，并等待 1 秒，如果文本没有变化，那么 javascript 将使用关键字从页面搜索。然后我用搜索结果重置数据源。

【参考方案1】：

我已经让它工作了，但我不确定的一件事是该项目只是一个字符串数组而不是 JSON 对象。我确实尝试将每个项目解析为 JSON，但似乎不起作用。

这是带有 webservice jquery 组合的工作 jquery json。

jQuery(函数 () jQuery("input#autocomplete").autocomplete(

            minChars: 2,

            select: function (event, ui) 
                AutoCompleteSelectHandler(event, ui)
            
            ,
            source: function (request, response) 
                jQuery.ajax(
                    url: "http://localhost/integration/webservices/PostcodeJSON.asmx/GetPostCodeListJSONfromSuburb",
                    data: ' Suburb: "' + jQuery("#autocomplete").val() + '" ',
                    dataType: "json",
                    type: "POST",
                    minChars: 2,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 
                        var obj = jQuery.parseJSON(data.d);
                        response($.map(obj, function (item) 
                            var item_obj = jQuery.parseJSON(item);
                            return 
                                value: item[1]


                            
                        ))


                    ,
                    //                        parse: function (data) 
                    //                            var parsed = [];
                    //                            data = data.d;

                    //                            for (var i = 0; i < data.length; i++) 
                    //                                parsed[parsed.length] = 
                    //                                    data: data[i],
                    //                                    value: data[i].value,
                    //                                    result: data[i].value
                    //                                ;
                    //                            

                    //                            return parsed;
                    //                        ,
                    //                        formatItem: function (item) 
                    //                            return item.value;
                    //                        ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) 
                        alert(textStatus);
                    
                );
            
        );



    );