Extenseur de remplissage automatique pour plusieurs zones de texte en utilisant Javascript

Question

Je souhaite appliquer un extendeur de saisie semi-automatique pour plusieurs zones de texte ayant le même attribut name, Par exemple.

Je veux juste appliquer le même extender autocomplete à tous ayant name="txtQtyPkgs". Comment puis-je faire ceci? Mon 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> 

mes données 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> 

mon 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

S'il vous plaît mettre un nom de classe commune pour tous vos TextBox et en utilisant jQuery saisie semi-automatique vous pouvez le faire.

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

Veuillez vous référer pour en savoir plus. http://jqueryui.com/demos/autocomplete/#remote

Ce que je fais est de faire une classe appelée auto et l'assigner à toute la zone de texte. Ainsi, lorsque l'utilisateur entre la valeur, il ira à la page du gestionnaire (asp.net) ou vous pouvez utiliser une page .php. Dans cette page gestionnaire, je sélectionne les données de la base de données en utilisant l'opérateur like de Sql.Après avoir sélectionné les valeurs juste Response.Write() (dans asp.net) ou echo (en php s'il vous plaît se référer) pour envoyer les données.Les données sont envoyées au format JSON

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

Ce qui précède est le format de JSON

pour tous auto suggèrent que vous pourriez avoir beaucoup de data.To faire, vous devez obtenir le nombre total de résultats retournés après l'exécution de la requête et make an loop.Initialisez une variable de chaîne avec la valeur par défaut "[" au début et ajoutez la chaîne avec {"id":"Data","label:Data","value":"data"} (c onstitue un objet JSON) .Si il y en a plus que vous venez d'ajouter un , et que vous faites une boucle à la fin, ajoutez "]" à la chaîne.

Alors ur tableau sera dans le format de

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

Le [' denotes the starting of array and ']' denotes the end The { `indique le démarrage de l'objet et '}' indique la fin

Pls se JSON pour en savoir plus

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); 
        }); 
       } 
      }); 
     } 

je fais de cette façon ... je ne reçois pas la façon dont vous avez dit "harie"