JQuery AutoComplete несколько экземпляров с несколькими вспомогательными полями для заполнения

У меня есть подключаемый модуль JQuery AutoCompletion, который работает и работает с 4 текстовыми полями ввода, Search1, Search2 и т. Д. В каждом окне поиска есть еще 2 поля, которые заполняются, когда выбраны результаты поиска, Location1, WebAddress1, Location2, Web Address2 и т. д .... до 4. Я могу получить только первый набор, но только с помощью $("#location1").val(ui.item.location);JQuery AutoComplete несколько экземпляров с несколькими вспомогательными полями для заполнения

Как сделать его более универсальным, чтобы он работал в каждом случае.

Вот что я до сих пор (это ASP.NET VB): -

$(function() { 
$(".resortNameSearch").autocomplete({ 
    source: function(request, response) { 
        $.ajax({ 
         url: '/remotecall/default.aspx?callType=resortSearch&term=' + request.term, 
         dataType: 'json', 
         success: function(data) { 
          response($.map(data, function(item) { 
           return { 
            label: item.resortName, 
            value: item.resortName, 
            location: item.location, 
            webSiteAddress: item.webSiteAddress 
           } 
          })); 
         } 
        }); 
       }, 
       minLength: 2, 
       select: function(event, ui) {      
        $("#<%=location1.ClientID%>").val(ui.item.location); 
        $("#<%=webSite1.ClientID%>").val(ui.item.webSiteAddress); 
       } 
     }); 
});

Это действительно немного в разделе «Выбрать» Мне нужна помощь.

Разметка XHTML выглядит следующим образом (просмотреть исходный код на .NET странице): -

<div id="registerTimeshareDiv"> 
    <div class="pagetextdiv"> 
     <p>Please enter details for up to 4 of your Timeshare weeks.</p> 
    </div> 

    <div id="ctl00_ContentPlaceHolder1_formDisplayDivTimeshare"> 


     <div id="requestDetailsFormDiv"> 
      <h2>Resort Details</h2> 

      <table class="BASTable"> 
      <tr> 
       <th colspan="2"> 
        RESORT NAME 1: 
       </th> 
       <th colspan="2"> 

        RESORT LOCATION 1: 
       </th>    
      </tr> 
      <tr> 
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$resortName1" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_resortName1" class="resortNameSearch" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$location1" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_location1" class="resortLocation" /> 
       </td>     
      </tr> 

      <tr> 
       <th colspan="2"> 
        OWNERS SURNAME 1: 
       </th> 
       <th colspan="2"> 
        WEBSITE ADDRESS 1: 
       </th>    
      </tr> 
      <tr> 
       <td colspan="2"> 

        <input name="ctl00$ContentPlaceHolder1$ownersSurname1" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_ownersSurname1" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$webSite1" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_webSite1" class="webSiteAddress" /> 
       </td>     
      </tr>    
      <tr> 
       <th align="center"> 
        Week No. 
       </th> 
       <th align="center"> 

        Unit No. 
       </th>     
       <th align="center"> 
        No. of Bedrooms/<br />Max No. of People 
       </th> 
       <th align="center"> 
        Check in Day 
       </th> 
      </tr>      
      <tr> 
       <td> 

        <input name="ctl00$ContentPlaceHolder1$weekNo1" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_weekNo1" class="timeshareBox2" /> 
       </td> 
       <td> 
        <input name="ctl00$ContentPlaceHolder1$unitNo1" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_unitNo1" class="timeshareBox2" /> 
       </td>     
       <td> 
        <input name="ctl00$ContentPlaceHolder1$bedrooms1" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_bedrooms1" class="timeshareBox2" /> 
       </td> 
       <td> 

        <input name="ctl00$ContentPlaceHolder1$checkInDay1" type="text" maxlength="8" id="ctl00_ContentPlaceHolder1_checkInDay1" class="timeshareBox2" /> 
       </td> 
      </tr> 
      </table> 

      <table class="BASTable"> 
      <tr> 
       <th colspan="2"> 
        RESORT NAME 2: 
       </th> 

       <th colspan="2"> 
        RESORT LOCATION 2: 
       </th>    
      </tr> 
      <tr> 
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$resortName2" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_resortName2" class="resortNameSearch" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$location2" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_location2" class="resortLocation" /> 

       </td>     
      </tr> 
      <tr> 
       <th colspan="2"> 
        OWNERS SURNAME 2: 
       </th> 
       <th colspan="2"> 
        WEBSITE ADDRESS 2: 
       </th>    
      </tr> 
      <tr> 

       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$ownersSurname2" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_ownersSurname2" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$webSite2" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_webSite2" class="webSiteAddress" /> 
       </td>     
      </tr>    
      <tr> 
       <th align="center"> 
        Week No. 
       </th> 

       <th align="center"> 
        Unit No. 
       </th>     
       <th align="center"> 
        No. of Bedrooms/<br />Max No. of People 
       </th> 
       <th align="center"> 
        Check in Day 
       </th> 
      </tr>      
      <tr> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$weekNo2" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_weekNo2" class="timeshareBox2" /> 
       </td> 
       <td> 
        <input name="ctl00$ContentPlaceHolder1$unitNo2" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_unitNo2" class="timeshareBox2" /> 
       </td>     
       <td> 
        <input name="ctl00$ContentPlaceHolder1$bedrooms2" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_bedrooms2" class="timeshareBox2" /> 
       </td> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$checkInDay2" type="text" maxlength="8" id="ctl00_ContentPlaceHolder1_checkInDay2" class="timeshareBox2" /> 
       </td> 
      </tr> 
      </table> 

      <table class="BASTable"> 
      <tr> 
       <th colspan="2"> 
        RESORT NAME 3: 
       </th> 

       <th colspan="2"> 
        RESORT LOCATION 3: 
       </th>    
      </tr> 
      <tr> 
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$resortName3" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_resortName3" class="resortNameSearch" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$location3" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_location3" class="resortLocation" /> 

       </td>     
      </tr> 
      <tr> 
       <th colspan="2"> 
        OWNERS SURNAME 3: 
       </th> 
       <th colspan="2"> 
        WEBSITE ADDRESS 3: 
       </th>    
      </tr> 
      <tr> 

       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$ownersSurname3" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_ownersSurname3" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$webSite3" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_webSite3" class="webSiteAddress" /> 
       </td>     
      </tr>    
      <tr> 
       <th align="center"> 
        Week No. 
       </th> 

       <th align="center"> 
        Unit No. 
       </th>     
       <th align="center"> 
        No. of Bedrooms/<br />Max No. of People 
       </th> 
       <th align="center"> 
        Check in Day 
       </th> 
      </tr>      
      <tr> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$weekNo3" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_weekNo3" class="timeshareBox2" /> 
       </td> 
       <td> 
        <input name="ctl00$ContentPlaceHolder1$unitNo3" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_unitNo3" class="timeshareBox2" /> 
       </td>     
       <td> 
        <input name="ctl00$ContentPlaceHolder1$bedrooms3" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_bedrooms3" class="timeshareBox2" /> 
       </td> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$checkInDay3" type="text" maxlength="8" id="ctl00_ContentPlaceHolder1_checkInDay3" class="timeshareBox2" /> 
       </td> 
      </tr> 
      </table> 

      <table class="BASTable"> 
      <tr> 
       <th colspan="2"> 
        RESORT NAME 4: 
       </th> 

       <th colspan="2"> 
        RESORT LOCATION 4: 
       </th>    
      </tr> 
      <tr> 
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$resortName4" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_resortName4" class="resortNameSearch" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$location4" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_location4" class="resortLocation" /> 

       </td>     
      </tr> 
      <tr> 
       <th colspan="2"> 
        OWNERS SURNAME 4: 
       </th> 
       <th colspan="2"> 
        WEBSITE ADDRESS 4: 
       </th>    
      </tr> 
      <tr> 

       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$ownersSurname4" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_ownersSurname4" /> 
       </td>     
       <td colspan="2"> 
        <input name="ctl00$ContentPlaceHolder1$webSite4" type="text" maxlength="35" id="ctl00_ContentPlaceHolder1_webSite4" class="webSiteAddress" /> 
       </td>     
      </tr>    
      <tr> 
       <th align="center"> 
        Week No. 
       </th> 

       <th align="center"> 
        Unit No. 
       </th>     
       <th align="center"> 
        No. of Bedrooms/<br />Max No. of People 
       </th> 
       <th align="center"> 
        Check in Day 
       </th> 
      </tr>      
      <tr> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$weekNo4" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_weekNo4" class="timeshareBox2" /> 
       </td> 
       <td> 
        <input name="ctl00$ContentPlaceHolder1$unitNo4" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_unitNo4" class="timeshareBox2" /> 
       </td>     
       <td> 
        <input name="ctl00$ContentPlaceHolder1$bedrooms4" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_bedrooms4" class="timeshareBox2" /> 
       </td> 

       <td> 
        <input name="ctl00$ContentPlaceHolder1$checkInDay4" type="text" maxlength="8" id="ctl00_ContentPlaceHolder1_checkInDay4" class="timeshareBox2" /> 
       </td> 
      </tr> 
      </table> 

      <div class="buttonsDiv"> 
       <input type="submit" name="ctl00$ContentPlaceHolder1$submitButtonTimeshare" value="Register" onclick="return validateTimeshare();" id="ctl00_ContentPlaceHolder1_submitButtonTimeshare" class="blueButton" /> 
      </div> 

     </div> 

    </div> 
    </div>

источник

2012-01-27 Craig

Может вы публикуете свою разметку? Это поможет нам помочь вам лучше и быстрее. – ShankarSangoli

У вас есть классы по этим «другим» элементам случайно? –

Спасибо, добавлена разметка. Да, есть классы в вводах, которые я хочу выполнить. – Craig

Ok, наконец, сортируется это таким образом можно заменить: выберите часть с: -

   select: function(event, ui) { 

         var inp = $('input'); 
         var index = inp.index(this);       

         $(inp[index+1]).val(ui.item.location); 
         $(inp[index+3]).val(ui.item.webSiteAddress); 
       }

источник

2012-01-28 01:33:39 Craig

JQuery AutoComplete несколько экземпляров с несколькими вспомогательными полями для заполнения

ответ

Смежные вопросы