如何在JSON自动完成文本框中分配不同的web方法

时间:2013-06-17 05:57:54

标签: jquery json

我想使用jquery-jSON完成自动完成文本框。我有两个webmethods,根据编码,需要更改web方法,即调用DB来获取autocomplete的记录。这是我的代码:

函数VenderCode(){

var type = $("#ddl_Type option:selected").val();
var fuctionname = (type == "TO" ? "GetServiceCtr" : "GetVenderCode");
    $("#txt_us_vender_Code").autocomplete({

        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: '/po_multiline.aspx/' + fuctionname,
                contentType: "application/json; charset=utf-8",
                data: "{'keywords':" + JSON.stringify($("#txt_us_vender_Code").val()) + "}",
                dataType: "json",
                async: false,
                success: function (data) {


                    response(data.d);
                    $(".ui-helper-hidden-accessible").remove();
                    $('.ui-widget-content').css('background-image', 'url("/resources/Image/ui-bg_flat_75_ffffff_40x100.png")');
                    $('.ui-widget-content').css('border', '1px solid #aaaaaa/*{borderColorContent}*/');
                },


                error: function (result) {

                    alert(result);

                }
            });
        },
        focus: function (e, ui) {
            $("#txt_us_vender_Code").val(ui.item.value);

        }

    });

}   我第一次在ready()函数中调用此代码,因此它工作正常。但是当我改变条件并尝试再次调用此代码时,它无法正常工作。我也改变了async:false.still它不能正常工作......请建议我怎么做......

先谢谢

1 个答案:

答案 0 :(得分:0)

您不应多次调用此代码。 .autocomplete插件应该只在document.ready中连接一次。然后将动态方法检索放在source回调中:

$(document).ready(function() {
    $("#txt_us_vender_Code").autocomplete({
        source: function (request, response) {
            var type = $("#ddl_Type option:selected").val();
            var fuctionname = (type == "TO" ? "GetServiceCtr" : "GetVenderCode");
            $.ajax({
                type: "POST",
                url: '/po_multiline.aspx/' + fuctionname,
                contentType: "application/json; charset=utf-8",
                data: JSON. stringify({ 
                    keywords: $("#txt_us_vender_Code").val() 
                }),
                dataType: "json",
                async: false,
                success: function (data) {
                    response(data.d);
                    $(".ui-helper-hidden-accessible").remove();
                    $('.ui-widget-content').css('background-image', 'url("/resources/Image/ui-bg_flat_75_ffffff_40x100.png")');
                    $('.ui-widget-content').css('border', '1px solid #aaaaaa/*{borderColorContent}*/');
                },
                error: function (result) {
                    alert(result);
                }
            });
        },
        focus: function (e, ui) {
            $("#txt_us_vender_Code").val(ui.item.value);
        }
    });
});

只要需要执行自动完成,就会调用源回调。它将从#ddl_Type下拉列表中动态检索方法名称,并向其发送AJAX请求。另请注意我如何将整个JSON.stringify参数包含在data中。