jquery - How to use Tagedit plugin in Asp.Net -

i want add tagedit plugin in project add names textbox. requirements are: 1. textbox should have autocomplete existing names. 2. should able accept new names if not found in existing data, similar tags textbox in stack overflow

below links plugin:

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

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

for purpose have used ajax json & webservice values database

step1: added controls aspx page

<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: added related links of jquery , css page

<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: added script data webservice

<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 employees');                 }             });               var array = $("#hfjsondata").val();          }          function fnarrangedata(list) {             var array = new array();             (var = 0; < list.length; i++) {                 array.push("{\"value\":\"" + list[i].ename + "\",\"empno\":\"" + list[i].empno + "\",\"sal\":\"" + list[i].sal + "\"}");             }              $("#hfjsondata").val(array);         }     </script> 

step4: added webservice code data database

[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: getting following results 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> 

step6: have changed webservice response jquery array using step 3

{"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"} 

now when running page neither getting error nor plugin working. request members me out in case. in advance help.