Расширение автозаполнения для нескольких текстовых полей с использованием Javascript

Question

Я хочу применить один автозаполняющий расширитель для нескольких текстовых полей с одинаковым атрибутом name, например.

Я просто хочу применить тот же автозаполняющий расширитель ко всем, имеющим name="txtQtyPkgs". Как я могу это сделать? Моего HTML

<table cellspacing="0" cellpadding="0" border="0" style="" id="flex1"> 
     <tbody> 
      <tr id="rowGH03013"> 
       <td align="Left" class="sorted"> 
        <div style="text-align: left; width: 150px;"> 
         GH03013</div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 150px;"> 
         999</div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 161px;"> 
         <input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);" 
          id="QtyPkgs19523"></div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 446px;"> 
         <input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName" 
          id="Buyer19523"></div> 
       </td> 
      </tr> 
      <tr class="erow" id="rowGH03011"> 
       <td align="Left" class="sorted"> 
        <div style="text-align: left; width: 150px;"> 
         GH03011</div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 150px;"> 
         999</div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 161px;"> 
         <input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);" 
          id="QtyPkgs19521"></div> 
       </td> 
       <td align="Left"> 
        <div style="text-align: left; width: 446px;"> 
         <input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName" 
          id="Buyer19521"></div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

моей данные XML

<table> 
    <userid>23</userid> 
    <userdispname>GUJARAT PACKERS LTD</userdispname> 
    <usercode>GTPL</usercode> 
</table> 

<table> 
    <userid>26</userid> 
    <userdispname>Lipton India Limited</userdispname> 
    <usercode>Lipton</usercode> 
</table> 
<table> 
    <userid>27</userid> 
    <userdispname>TOSH LTD.</userdispname> 
    <usercode>ATosh</usercode> 
</table> 
<table> 
    <userid>28</userid> 
    <userdispname>SERVICES INDIA PVT. LTD.</userdispname> 
    <usercode>TSI</usercode> 
</table> 
<table> 
    <userid>29</userid> 
    <userdispname>Parekh Company</userdispname> 
    <usercode>Parekh</usercode> 
</table> 
<table> 
    <userid>30</userid> 
    <userdispname>SHREE BALAJI CO.</userdispname> 
    <usercode>Balaji</usercode> 
</table> 
<table> 
    <userid>31</userid> 
    <userdispname>Kesaria Company</userdispname> 
    <usercode>Kesaria</usercode> 
</table> 

моего Javascript

$(document).ready(function() { 
      AuctoCmplBuyer(); 
      $(".auto").autocomplete({ source: [AuctoCmpData] }); 
     }); 
function AuctoCmplBuyer() { 
      $.ajax({ 
       type: "POST", 
       url: "../service/WebService.asmx/XmlData", 
       data: "{strData:'BuyerList'}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "xml", 
       success: function (msg) { 
        $(msg).find('Table').each(function() { 
         if (StrData.length != 0) { 
          StrData = StrData + ","; 
         } 
         StrData = '{"id":"' + $(this).find('UserID').text() + '","label":"' + $(this).find('UserDispName').text() + '","value":"' + $(this).find('UserDispName').text() + '"}'; 
        }); 
       } 
      }); 
      AuctoCmpData = StrData; 
     } 

Answer 1

Пожалуйста, поставьте общее название класса для все вашего текстового поля и с помощью JQuery автозаполнения вы можете это сделать.

$(".auto").autocomplete({ 
     source: "../Ajax/AjaxGetData.ashx, 
     minLength: 2, 
     select: function(event, ui) { 
      $(this).val(ui.item.value); 
     } 
    }); 

Подробнее см. Ниже. http://jqueryui.com/demos/autocomplete/#remote

Что я делаю, это сделать класс с именем auto и назначить его ко всему текстовому полю. поэтому когда пользователь вводит значение, он перейдет на страницу обработчика (asp.net), или вы можете использовать страницу .php. На этой странице обработчика я выбираю данные из базы данных, используя оператор like Sql. После выбора значений только Response.Write() (в asp.net) или echo (по ссылке php см.) Для отправки данных. Данные отправляются в формате JSON

[ { "id":"XYZ" , "label":"XYZ" , "value": "XYZ"}] 

выше формат JSON

для всех авто предлагают вам, возможно, придется много data.To сделать, так что вы должны получить общее количество результатов, возвращаемых после выполнения запроса и make loop.Интициализируйте строковую переменную со значением по умолчанию как "[" до начала и добавьте строку с {"id":"Data","label:Data","value":"data"} (это c onstitutes объект JSON). Если у него есть больше, чем просто добавьте , и сделайте цикл в конце, добавьте "]" в строку.

Так ур массив будет в формате

[ { "id":"XYZ1" , "label":"XYZ1" , "value": "XYZ1"}, { "id":"XYZ2" , "label":"XYZ2" , "value": "XYZ2"}] 

[' denotes the starting of array and ']' denotes the end The { `означает запуск объекта и«}»обозначает конец

Pls сослаться JSON знать больше

Answer 2

$(document).ready(function() { 
      AuctoCmplBuyer(); 
Auctocomplete functionality to each textbox 
      $(".auto").autocomplete({ source: AuctoCmpData }); 
     }); 

function AuctoCmplBuyer() { 
      $.ajax({ 
       type: "POST", 
       url: "../service/TWWebService.asmx/XmlData", 
       data: "{strData:'BuyerList'}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "xml", 
       success: function (msg) { 
        $(msg).find('Table').each(function() { 
         rowObj = new Object(); 
         rowObj.col1 = $(this).find('UserDispName').text() + '-' + $(this).find('UserID').text(); 
         AuctoCmpData.push(rowObj); 
        }); 
       } 
      }); 
     } 

Я так делаю ... я не понимаю, как вы сказали «гари»