jquery自动完成数据源更改

时间:2011-06-23 10:20:29

标签: javascript jquery jquery-ui-autocomplete

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

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

我使用了firebug来检查数据源,但我发现它没有任何问题。

有人可以告诉我如何向控件发送向上或向下箭头键或以其他任何方式解决此问题吗?

非常感谢!

编辑:我已将此替换为JSON,如下所示,但似乎请求出现错误警告框

  

jQuery(function(){               jQuery的( “输入#自动完成”)。自动完成({                   contentType:'application / json;字符集= UTF-8' ,                   dataType:'json',                   mustMatch:false,                   限制: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){                               警报(textStatus);                           }                       });                   }               });

    });

有这个html输入框。

我在这里做错了什么?我已确认Web服务正常运行。

edit2:我做了如下更改:

  

jQuery(function(){               jQuery的( “输入#自动完成”)。自动完成({

            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”,                           类型:“POST”,                           contentType:“application / json; charset = utf-8”,                           dataFilter:function(data){return data.d; },                           成功:函数(数据){                               警报(data.d);                           },                           错误:函数(XMLHttpRequest,textStatus,   errorThrown){                               警报(textStatus);                           }                       });                   }               });

    });

所以警报工作正常。但是jquery没有显示匹配的列表。我该怎么做?

编辑2:

我已成功解决了webservice的问题。如何设置响应以便自动完成显示相应的列表?目前,列表中的每个项目都会显示完整的项目列表。

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

我有如下的jquery设置:

jQuery(function(){             jQuery的( “输入#自动完成”)。自动完成({

            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);
                    }
                });
            }
        });

非常感谢任何帮助,非常感谢!

1 个答案:

答案 0 :(得分:0)

我有它工作,但有一点我不确定该项只是一个字符串数组而不是JSON对象。我确实尝试将每个项目解析为JSON,但似乎无法正常工作。

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

jQuery(function(){             jQuery的( “输入#自动完成”)。自动完成({

            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);
                    }
                });
            }
        });



    });