JQuery AutoComplete 多个实例需要填写多个辅助字段

Question

我安装了 JQuery AutoCompletion 插件，并在 4 个输入文本框（Search1、Search2 等）上工作。每个搜索框都有 2 个其他框，当选择搜索结果时会填写：Location1、WebAddress1、Location2、Web Address2等....到4.我可以填写第一组，但只能通过执行 $( "#location1" ).val(ui.item.location);

我怎样才能做到更通用所以它在每种情况下都有效。

这是我到目前为止所拥有的（它是 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>

Answer 1

好的，最后以这种方式排序，将 select: 部分替换为：-

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