Dima Alek

Dima Alek

  • NA
  • 43
  • 1.8k

How can I use autocomplete textbox in "each" loop in table

May 19 2020 2:04 AM
  1. $.ajax({     
  2.      type: "GET",   
  3.        url: "/Home/JsonWeekEvents",   
  4.        dataType: "JSON",    
  5.       success: function (result) {   
  6.            $.each(result, function (i, val) {  
  7.                  var trow = $('<tr/>').data("id", val.Id);     
  8.              //trow.append('<td>' + val.Id + " " + '</td>');  
  9.                 trow.append('<td style="padding:5px; width:100px; height:70px"></td>');   
  10.                trow.append('<td valign="top" style="padding:2px; width:150px;   
  11.                                          height:100px">' +             
  12.          '<div class="ui-widget">' +   
  13.                    '<input  size="10" maxlength="10" id="tagsM" />' +  
  14.                                             '<input type="button" id="addBtn" onclick="addEvent();" size="5" value="+" /><br/>' +  
  15.                                                  '<div style="text-align:center"                               id="desc_Num">' + val.Monday + '</div >' +    
  16.                               '</div >' +    
  17.                           '</td>');    
  18.                tab.append(trow);    
  19.           });   
  20.             $("tr:odd", tab).css('background-color''#C4C4C4');   
  21.            $("#weekEvents").html(tab);          
  22. },       
  23.    error: function () {   
  24.            alert("Failed! Please try again.");   
  25.        }    });      
  26. var tab = $('<table class=MyTable border=1 ></table>');    
  27.   var thead = $('<thead></thead>');    
  28.    thead.append('<th style="padding:5px">FSE' + " " + '</th>');    
  29.   thead.append('<th style="padding:5px">Monday' + " " + '</th>');    
  30.   thead.append('<th style="padding:5px">Tuesday' + " " + '</th>');  
  31.     thead.append('<th style="padding:5px">Wednesday' + " " + '</th>');    
  32.   thead.append('<th style="padding:5px">Thursday' + " " + '</th>');  
  33.     thead.append('<th style="padding:5px">Friday' + " " + '</th>');  
  34.     thead.append('<th style="padding:5px">Saturday' + " " + '</th>');  
  35.     thead.append('<th style="padding:5px">Sunday' + " " + '</th>');  
  36.      tab.append(thead);      tab.on("focus""input[id='tagsM']"function (e)   
  37. {         $("#tagsM").autocomplete({    
  38.           source: function (request, response) {   
  39.                $.ajax({          
  40.             url: "/Home/GetSearchValue",    
  41.                   dataType: "json",     
  42.                  data: { search: $("#tagsM").val() },    
  43.                   success: function (data) {  
  44.                         response($.map(data, function (item) {  
  45.                             return {     
  46.                               label: item.Title + ', ' + item.Description, value:  
  47.                                                                              item.Title,  
  48.                                  Id: item.Id,  
  49.                                 Title: item.Title,   
  50.                                Description: item.Description,    
  51.                               Location: item.Location   
  52.                            }                       
  53.    }));    
  54.                   },   
  55.                    error: function (xhr, status, error) {  
  56.                         alert("Error!" + xhr);    
  57.                   },   
  58.                 });  
  59.             }  
  60.         });  

Answers (1)