JQuery AutoComplete multiple instances with multiple auxiliary fields to fill in -

JQuery AutoComplete multiple instances with multiple auxiliary fields to fill in -

i have jquery autocompletion plug installed , working on 4 input text boxes, search1, search2, etc.. each search box there 2 other boxes filled in when search results selected, location1, webaddress1, location2, web address2, etc....to 4. can first set filled in doing $( "#location1" ).val(ui.item.location);

how can create more generic works in each case.

here's have far (it's asp.net vb):-

$(function() { $( ".resortnamesearch" ).autocomplete({ source: function( request, response ) { $.ajax({ url: '/remotecall/default.aspx?calltype=resortsearch&term=' + request.term, datatype: 'json', success: function( info ) { response( $.map( data, function( item ) { homecoming { 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); } }); });

it's bit in "select" section need help with.

the xhtml markup follows (view source on .net page):-

<div id="registertimesharediv"> <div class="pagetextdiv"> <p>please come in details 4 of 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>

ok, sorted way replacing select: part with:-

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

jquery autocomplete multiple-instances