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 2012-01-27 16:48:11

你是否偶然在這些「其他」元素上課？ – 2012-01-27 17:06:23

謝謝，標記添加。是的，我想要實現的輸入框中有類。 – Craig 2012-01-27 17:21:33

好了，終於來分類的這種方式來替代選擇：與部分： -

   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有多個輔助字段填充的多個實例

回答

相關問題