I have the JQuery AutoCompletion plug installed and working on 4 input text boxes, Search1, Search2, etc.. With each search box there are 2 other boxes that get filled in when a search results is selected, Location1, WebAddress1, Location2, Web Address2, etc….to 4. I can get the first set filled in but only by doing $( "#location1" ).val(ui.item.location);
How can I make it more generic so it works in each case.
Here’s what I have so 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( 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);
}
});
});
It’s really the bit in the “Select” section I need help with.
The XHTML markup is as follows (view source on .NET page):-
<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>
Ok, finally sorted it this way be replacing the select: part with:-