jquery - Asp.Net で Tagedit プラグインを使用する方法

Question

プロジェクトに Tagedit プラグインを追加して、テキスト ボックスに名前を追加したいと考えています。私の要件は次のとおりです。 1.テキストボックスには、既存の名前のオートコンプリートが必要です。2.スタックオーバーフローのタグテキストボックスと同様に、既存のデータに見つからない場合は新しい名前を受け入れることができるはずです

以下はプラグインのリンクです。

http://tagedit.webwork-albrecht.de/

http://tagedit.webwork-albrecht.de/playground.html

この目的のために、データベースから値を取得するためにajax JSONとWebサービスを使用しました

手順 1: aspx ページにコントロールを追加

<form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TextBox ID="txtEmpNames" runat="server" ></asp:TextBox>
        <img alt="" src="" />
    </div>
    <input type="hidden" id="hfJsonData" />
    </form>

Step2: jquery と CSS の関連リンクをページに追加

<link href="App_Styles/jquery-ui-1.10.2.css" rel="stylesheet" type="text/css" />
    <link href="App_Styles/CRMStyles.css" rel="stylesheet" type="text/css" />
    <link href="App_Scripts/JqPlugins/Autocomplete/Tagedit-master/css/jquery.tagedit.css"
        rel="stylesheet" type="text/css" />
    <script src="App_Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../App_Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="App_Scripts/JqPlugins/Autocomplete/Tagedit-master/js/jquery.tagedit.js"
        type="text/javascript"></script>

Step3: Web サービスからデータを取得するスクリプトを追加

<script type="text/javascript">
        $(document).ready(function () {
            fnGetemployess();
            var localdata = [$("#hfJsonData").val()];
            debugger;
            $('#<%=txtEmpNames.ClientID %>').tagedit({ autocompleteOptions: { source: localdata} });

        });
        function fnGetemployess() {
            var jsonData;
            $.ajax({
                type: "POST",
                url: "http://localhost:7253/Webservice.asmx/Getemployees",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    fnArrangedata(response.d);
                },
                failure: function (response) {
                    alert('Failed to get employees');
                }
            });


            var array = $("#hfJsonData").val();

        }

        function fnArrangedata(list) {
            var array = new Array();
            for (var i = 0; i < list.length; i++) {
                array.push("{\"value\":\"" + list[i].ename + "\",\"empno\":\"" + list[i].empno + "\",\"sal\":\"" + list[i].sal + "\"}");
            }

            $("#hfJsonData").val(array);
        }
    </script>

Step4: データベースからデータを取得するための Web サービスコードを追加

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  public List<empCls> Getemployees()
        {
            List<empCls> Employees = new List<empCls>();
            List<emp> emps = new CRMTestDataContext().emps.ToList();
            foreach (var item in emps)
            {
                empCls em = new empCls
                {
                    ename = item.ename,
                    empno = item.empno,
                    sal=item.sal
                };
                Employees.Add(em);
            }
            return Employees;
        }

Step5: Webservice から次の結果を取得しています

    <ArrayOfEmpCls>

<empCls><empno>1</empno><ename>JOHNSON</ename><sal>18000.00</sal>
</empCls><empCls><empno>2</empno><ename>HARDING</ename><sal>52000.00</sal>
</empCls><empCls><empno>3</empno><ename>TAFT</ename><sal>25000.00</sal>
</empCls><empCls><empno>4</empno><ename>HOOVER</ename><sal>27000.00</sal>
</empCls><empCls><empno>5</empno><ename>LINCOLN</ename><sal>22500.00</sal>
</empCls><empCls><empno>6</empno><ename>GARFIELD</ename><sal>54000.00</sal>
</empCls><empCls><empno>7</empno><ename>POLK</ename><sal>25000.00</sal>
</empCls><empCls><empno>8</empno><ename>GRANT</ename><sal>32000.00</sal>
</empCls><empCls><empno>9</empno><ename>JACKSON</ename><sal>75000.00</sal>
</empCls><empCls><empno>10</empno><ename>FILLMORE</ename><sal>56000.00</sal>
</empCls><empCls><empno>11</empno><ename>ADAMS</ename><sal>34000.00</sal>
</empCls><empCls><empno>12</empno><ename>WASHINGTON</ename><sal>18000.00</sal>
</empCls><empCls><empno>13</empno><ename>MONROE</ename><sal>30000.00</sal>
</empCls><empCls><empno>14</empno><ename>ROOSEVELT</ename><sal>35000.00</sal>

</empCls></ArrayOfEmpCls>

ステップ 6: ステップ 3 を使用して、Web サービスの応答を jquery 配列に変更しました。

{"value":"JOHNSON","empno":"1","sal":"18000"},
{"value":"HARDING","empno":"2","sal":"52000"},
{"value":"TAFT","empno":"3","sal":"25000"},
{"value":"HOOVER","empno":"4","sal":"27000"},
{"value":"LINCOLN","empno":"5","sal":"22500"},
{"value":"GARFIELD","empno":"6","sal":"54000"},
{"value":"POLK","empno":"7","sal":"25000"},
{"value":"GRANT","empno":"8","sal":"32000"},
{"value":"JACKSON","empno":"9","sal":"75000"},
{"value":"FILLMORE","empno":"10","sal":"56000"},
{"value":"ADAMS","empno":"11","sal":"34000"},
{"value":"WASHINGTON","empno":"12","sal":"18000"},
{"value":"MONROE","empno":"13","sal":"30000"},
{"value":"ROOSEVELT","empno":"14","sal":"35000"}

ページを実行しても、エラーもプラグインも機能していません。この場合、すべてのメンバーが私を助けてくれることを願っています。助けてくれてありがとう。