Question

我有一个带有asp文本框的vb.net网页，我正在尝试将jquery自动完成附加到该文本框。调试器告诉我，在文本框中输入将调用后面代码中的相关webmethod。这会调用另一个使用linq-to-sql来获取结果的方法，然后返回那些结果，然后......没有。 VS调试器显示从webmethod成功返回的正确结果，并且浏览器控制台不显示任何错误，但自动完成从不显示建议。

代码隐藏文件和jquery之间的建议发生了什么？

自动完成

$(function () {
    $(".autoJobNum").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/GetCompletionList",
                data: "{'input':" + document.getElementById("<%= txtJobNumber.ClientID%>").value + "}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    });
});

的webmethod

<WebMethod()> _
Public Shared Function GetCompletionList(ByVal input As String) As List(Of String)
    Dim result As List(Of String) = getJobNumberSuggestions(input)
    Return result
End Function

文本框

<asp:UpdatePanel ID="upnlMain" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="txtJobNumber" runat="server" MaxLength="7" Width="75px" CssClass="autoJobNum" />
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

您使用自动填充错误，这就是方法：

var submitOK = false;
var searchURL = null;
var checkURL = null;
var autocomplete_fieldname = null;

function autocomplete(fieldName, ajaxURL_getList, ajaxURL_checkInput, formID)
{
    searchURL = ajaxURL_getList;
    checkURL = ajaxURL_checkInput;
    autocomplete_fieldname = fieldName;
    var txtField = $(":text[name='" + fieldName + "']");
    txtField.autocomplete({delay : 50, minLength : 1, search : search, source : searchURL + txtField.val()});
    $("form#" + formID).on("submit", _submit);
}

function search()
{
    //console.log("changed");
    var me = $(":text[name='" + autocomplete_fieldname + "']");
    var val = me.val();
    me.autocomplete("option", "source", searchURL + val);
}

function _submit(evt)
{

    var txtField = $(":text[name='" + autocomplete_fieldname + "']");
    jQuery.ajaxSetup({async:false});
    var xhr = jQuery.getJSON(checkURL + txtField.val() , null, submitResult);
    jQuery.ajaxSetup({async:true});

    return submitOK;
}

function submitResult(data)
{
    var txtField = $(":text[name='" + autocomplete_fieldname + "']");

    if(!data || data === "false" || data === false)
    {
        txtField.effect("shake");
        submitOK = false;
    }
    else
    {
        submitOK = true;
    }

}

然后在各个表单和字段上设置自动填充，如下所示：

autocomplete("MY_FORM_FIELD_NAME", "MY_AJAX_URL?GETLIST=", "MY_AJAX_URL?GETVALUE=", "MY_FORM_ID");

此脚本将拒绝您的数据源中未找到的输入 - 这是一个非常好的验证，它还提供强大的自动完成功能。你必须有jQuery UI，但我猜大多数使用jQuery的人也有jQ-UI：）

Answer 2

原来问题中的代码原样正常，但是从文本框中删除焦点（比如，在Visual Studio中的断点上继续点击）会停止显示下拉列表。

VB WebMethod返回值，但jQuery自动完成不显示它们

2 个答案: