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

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

1 голос
/ 27 января 2012

У меня установлен плагин JQuery AutoCompletion, который работает с 4 входными текстовыми полями, Search1, Search2 и т. Д. В каждом окне поиска есть 2 других поля, которые заполняются при выборе результатов поиска, Location1, WebAddress1, Location2 , Веб-адрес2 и т. Д. До 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>

1 Ответ

1 голос
/ 28 января 2012

Хорошо, наконец-то отсортировано, заменив select: part на: - 

                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);
                }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...