1

我想在我的项目中添加 Tagedit 插件以将名称添加到文本框。我的要求是： 1. 文本框应该具有现有名称的自动完成功能。2. 如果在现有数据中找不到新名称，它应该能够接受新名称，类似于堆栈溢出中的标签文本框

以下是该插件的链接：

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

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

为此，我使用了 ajax JSON & webservice 从数据库中获取值

Step1：向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>

步骤 3：添加脚本以从 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步将webservice响应更改为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"}

现在，在运行页面时，我既没有收到错误消息，也没有插件正常工作。在这种情况下，我请求所有成员帮助我。在此先感谢您的帮助。

4

0 回答 0