javascript - javascript配列を埋めるjqueryオートコンプリート?

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フレームワークprolly pre 2.0アプリを扱っています。その 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

前述のように、これは単なるテストだったので、文字列配列に 2 つの項目を追加して返すだけです。今、これを組み込むためにjqueryコードを変更する方法がかなりわかりません....次のようなものを追加すると思いました：

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

しかし、私のjqueryのスキルが不足しているため、それを元のjqueryに組み込む方法がわかりません...実際に機能するように、これを理解し、これをまとめてくれる人はいますか。テストが機能するようになったら、データベースからデータを取得するように変更できます。私は正しい道を進んでいますか？

編集

これが私が持っているものです

$("#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: リクエストの形式が無効です: application/json; 文字セット=UTF-8。System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() で System.Web.Services.Protocols.WebServiceHandler.Invoke() で System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest() で

これが私のWebサービスです：

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 アプリケーションです。この .asmx ファイルを表すために Web 構成ファイルに何かが必要ですか? Web メソッドのパラメーターは ajax 呼び出しのパラメーターと一致するため、何が原因でしょうか?

score 0 · Accepted Answer

ここでの問題は、Web サービスが XML またはテキストを想定していることだと思います。JSON は機能しません。

(ajax 呼び出しで) content-Type をテキストに変更し、GetLogins メソッドから文字列配列ではなく文字列を返すことを試すことができます。そうすれば、JSON コンバーターを使用して文字列配列を JSON 文字列にシリアル化し、それを返すことができます。

javascript - javascript配列を埋めるjqueryオートコンプリート?

編集

1 に答える 1

Related

Reference