jQuery的自动完成来填充一个JavaScript数组？

Question

I wanted to add autocomplete to a text box I had on my form. I found an excellent SO thread that entailed this right here: https://stackoverflow.com/a/5973017/168703 This was exactly what I needed because it also only showed the autocomplete when someone typed an @ symbol.

It was something to the effect of this:

$("#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;
    }
});

Pay close attention to the source portion as it forced me to declare something like this:

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

                        ];

That is my autocomplete suggestions would be inside of the js file...but this is the only part I did not want. I have to load the data from a database. Unfortunately I am dealing with an ancient .net framework prolly pre 2.0 app. Its vb.net and there is no linq or lists or all the good stuff. Fine I thought..I could probably create a .asmx file that added strings to an array list, converted it back to a string array and returned it in the .asmx file. Something to this effect (this was just a test no pulling data just yet from a database):

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

As mentioned this was just a test so I'm just adding two items in a string array and returning it. Now I am pretty unsure how to change my jquery code to incorporate this.... I thought I would add something like this:

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

But I am not sure how to incorporate that in the original jquery as my jquery skills are zilch... Can anyone help me understand this and put this together so it may actually work. Once I get the test working I can then modify it to pull data from the database. Am I on the right path?

EDIT

Here's what I have

$("#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;
    }
});

But my app is throwing an internal server error 500. With the following exception:

System.InvalidOperationException: Request format is invalid: application/json; charset=UTF-8. at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() at System.Web.Services.Protocols.WebServiceHandler.Invoke() at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

Here is my webservice:

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

Again this is an old 1.1 .net application, do I need something in the web config file to represent this .asmx file? The parameters in the web method match the parameters of the ajax call so what could be causing this?

Answer 1

I think the problem here is that web services expect XML or text. JSON won't work.

You can try changing your content-Type (in your ajax call) to text and returning a string instead of a string array from your GetLogins method. That way you can serialize your string array to a JSON string using a JSON converter and return that.