Question

我想将自动填充功能添加到我在表单上的文本框中。我找到了一个优秀的SO主题，这就是：https://stackoverflow.com/a/5973017/168703这正是我需要的，因为当有人输入@符号时，它也只显示自动完成。

这是有效的：

$("#ucAddActionItemIssueActions_txtActionItem")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {       
        var term = request.term,
            results = [];
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            } else {
                results = ['Start typing...'];
            }
        }
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        var email = GetEmail(ui.item.value);
        email = email + ";";
        emails.push(email);
        $("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

密切关注source部分，因为它迫使我宣布这样的事情：

var availableTags = [
                            "jdoe",
                            "tsmith",
                            "mrighty",
                            "tstevens",
                            "ktripp",
                            "tram",

                        ];

这是我的自动填充建议将在js文件内...但这是我不想要的唯一部分。我必须从数据库加载数据。不幸的是，我正在处理一个古老的.net框架。它的vb.net并没有linq或列表或所有好东西。好吧，我想......我可能会创建一个.asmx文件，将字符串添加到数组列表中，将其转换回字符串数组并将其返回到.asmx文件中。这样的效果（这只是一个测试，没有从数据库中提取数据）：

Imports System.Web.Services
Imports System.Collections


<System.Web.Services.WebService(Namespace := "http://tempuri.org/myapp.com/GetLogins")> _
Public Class GetLogins
    Inherits System.Web.Services.WebService

#Region " Web Services Designer Generated Code "

    Public Sub New()
        MyBase.New()

        'This call is required by the Web Services Designer.
        InitializeComponent()

        'Add your own initialization code after the InitializeComponent() call

    End Sub

    'Required by the Web Services Designer
    Private components As System.ComponentModel.IContainer

    'NOTE: The following procedure is required by the Web Services Designer
    'It can be modified using the Web Services Designer.  
    'Do not modify it using the code editor.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
        components = New System.ComponentModel.Container()
    End Sub

    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
        'CODEGEN: This procedure is required by the Web Services Designer
        'Do not modify it using the code editor.
        If disposing Then
            If Not (components Is Nothing) Then
                components.Dispose()
            End If
        End If
        MyBase.Dispose(disposing)
    End Sub

#End Region

    ' WEB SERVICE EXAMPLE
    ' The HelloWorld() example service returns the string Hello World.
    ' To build, uncomment the following lines then save and build the project.
    ' To test this web service, ensure that the .asmx file is the start page
    ' and press F5.
    '

    'Public Function HelloWorld() As String
    '   Return "Hello World"
    'End Function
    <WebMethod()> _
    Public Function GetLogins() As String()
        Dim myList As ArrayList
        myList.Add("jstevens")
        myList.Add("jdoe")

        Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
        Return arr
    End Function
End Class

如上所述，这只是一个测试，所以我只是在字符串数组中添加两个项目并返回它。现在我很不确定如何更改我的jquery代码以合并这个.... 我想我会添加这样的东西：

$.ajax({
            url: "GetLogins.asmx/GetLogins",
            data: "{ 'resName': '" + request.term + "' }",
            datatype: "json",
            type= "POST",
            contentType: "application/json; charset=utf-8"
            })

但我不确定如何将其纳入原始jquery，因为我的jquery技能是zilch ... 任何人都可以帮助我理解这一点，并把它放在一起所以它可能实际上有效一旦我开始测试，我就可以修改它以从数据库中提取数据。我在正确的道路上吗？

修改

这就是我所拥有的

$("#ucAddActionItemIssueActions_txtActionItem")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
   source: function (request, response) {
        //get client value
        var c = $("#ucAddActionItemIssueActions_ddlClientAssignTo").val();
        var params= '{"ClientID":"' + c + '"}';
        $.ajax({
            url: "GetLogins.asmx/GetLogins",
            data: params,
            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: item.name
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });},
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        var email = GetEmail(ui.item.value);
        email = email + ";";
        emails.push(email);
        $("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

但我的应用程序正在抛出内部服务器错误500.出现以下异常：

System.InvalidOperationException：请求格式无效：应用/ JSON;字符集= UTF-8。在 System.Web.Services.Protocols.HttpServerProtocol.ReadParameters（）at System.Web.Services.Protocols.WebServiceHandler.Invoke（）at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest（）

这是我的网络服务：

Imports System.Web.Services
Imports System.Collections
<System.Web.Services.WebService(Namespace := "http://tempuri.org/quikfix.jakah.com/GetLogins")> _
Public Class GetLogins
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function GetLogins(ByVal ClientID As Integer) As String()
        Dim myList As New ArrayList
        myList.Add("jstevens")
        myList.Add("jdoe")
        myList.Add("smartin")

        Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
        Return arr
    End Function
End Class

这是一个旧的1.1 .net应用程序，我是否需要在Web配置文件中表示此.asmx文件？ Web方法中的参数与ajax调用的参数匹配，那么可能导致这种情况呢？

Answer 1

我认为这里的问题是Web服务需要XML或文本。 JSON无效。

您可以尝试将内容类型（在ajax调用中）更改为文本，并从GetLogins方法返回字符串而不是字符串数组。这样，您可以使用JSON转换器将字符串数组序列化为JSON字符串并返回该字符串。

jquery自动完成填充javascript数组？

修改

1 个答案: