1
我有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>
灿你发布你的标记?这会帮助我们更好,更快地帮助你。 – ShankarSangoli 2012-01-27 16:48:11
你是否偶然在这些“其他”元素上课? – 2012-01-27 17:06:23
谢谢,标记添加。是的,我想要实现的输入框中有类。 – Craig 2012-01-27 17:21:33