最近在项目中使用jquery autocomplete,感觉使用起来蛮方便。主要能解决快速自动填充,还能解决连选问题。例如要选择国家,然后定位选择区域类似这样的问题。
首先要有jquery 和 autocomplete 包。附件中附带有。
页面如下:
search.flt
注意在input 中有autocomplete="on" 属性。这个属性很重要。当你需要带两个参数进行查询得时候,就需要往autocomplete中传参数,它表示允许你进行带参数。当初写得时候忽略此项,autocomplete默认带一个参数,在你得action 中用“q”来接收。这是它写死的。例如你在input框中输入“china”,传给action中这个q就等于china。
但是业务总是变化的,例如当你country选择好,要选择region的时候,这个region需要根据country id来限制区域得范围。这时候就有两个参数来查询region,一个是你输入得参数,一个是country id。这时候autocomplete一个q就不够使用了。虽然autocomplete给了设置参数得选择 这项extraParams:{},但是页面一加载,这个参数就不能改变了,看来它只能用来加载静态的参数。
country.js
当你在country input框中输入国家时,会自动触发autocompleteCountryName方法,去动态调用action findCountry方法。
Action
此action将返回一个页面来循环输出这个list
struts.xml
hotelconfigforselect.ftl
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<@s.iterator value="hotelConfigConditions">
<span style="display:none;"><@s.property value="id"/></span><span><@s.property value="name"/></span>
</@s.iterator>
[/code]
我们来看country.js
这段代码:
[code]
var completer = document.getElementById("region").autocompleter;
completer.setExtraParams({"countryId" : $("#countryId").val()});
completer.flushCache()
[/code]
他就是来赋值参数的。当你选择国家后,生成了countryId,然后把countryId 赋值给区域autocomplete,在区域再查询的时候,在action中就可以得到这个countryId. 在action 中定义String countryId .就可以得到这个countryId;
selectItemForCountry(li) 方法是来得到你循环国家list,然后处理得到你需要得数据。
在hotelconfigforselect.ftl 页面中循环了LIST autocomplete 会自动给你加上li标签。
然后我们可以通过这个li标签来得到我们的数据。
首先要有jquery 和 autocomplete 包。附件中附带有。
页面如下:
search.flt
<tr>
<td>国家:</td>
<td align="left">
<input type="text" id="country" autocomplete="on"/>
<input type="hidden" id="countryId" name="conditions.country.value"/>
</td>
<td>区域:</td>
<input type="text" id="region" autocomplete="on">
<input type="hidden" id="regionId" name="conditions.region.value" >
</td>
</tr>
注意在input 中有autocomplete="on" 属性。这个属性很重要。当你需要带两个参数进行查询得时候,就需要往autocomplete中传参数,它表示允许你进行带参数。当初写得时候忽略此项,autocomplete默认带一个参数,在你得action 中用“q”来接收。这是它写死的。例如你在input框中输入“china”,传给action中这个q就等于china。
但是业务总是变化的,例如当你country选择好,要选择region的时候,这个region需要根据country id来限制区域得范围。这时候就有两个参数来查询region,一个是你输入得参数,一个是country id。这时候autocomplete一个q就不够使用了。虽然autocomplete给了设置参数得选择 这项extraParams:{},但是页面一加载,这个参数就不能改变了,看来它只能用来加载静态的参数。
country.js
$(document).ready(function() {
autocompleteCountryName($("#country"));
});
function autocompleteCountryName(obj, callBackFn) {
$(obj).autocomplete(
".." + "/hotelconfig/findCountry.action",
{
delay:200,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:1,
onItemSelect:callBackFn || selectItemForCountry,
formatItem:formatItem,
maxItemsToShow:20,
width:300,
autoFill:false
});
}
function selectItemForCountry(li) {
var $span = $("span:first", li);
var id = $span.text();
var name = $span.next().text();
$("#countryId").val(id);
$("#country").val(name);
var completer = document.getElementById("region").autocompleter;
completer.setExtraParams({"countryId" : $("#countryId").val()});
completer.flushCache();
}
function formatItem(row) {
return row[0];
}
当你在country input框中输入国家时,会自动触发autocompleteCountryName方法,去动态调用action findCountry方法。
Action
...
private q;
private List<HotelConfigCondition> hotelConfigConditions = new ArrayList<HotelConfigCondition>();
public void findCountry(){
hotelConfigConditions = service.findCountrys(q);
.....
return SUCCESS
}
此action将返回一个页面来循环输出这个list
struts.xml
<action name="findCountry" class="...HotelConfigByProviderAction" method="findCountry">
<result name="success">/pages/hotelconfigbyprovider/hotelconfigforselect.ftl</result>
</action>
hotelconfigforselect.ftl
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<@s.iterator value="hotelConfigConditions">
<span style="display:none;"><@s.property value="id"/></span><span><@s.property value="name"/></span>
</@s.iterator>
[/code]
我们来看country.js
这段代码:
[code]
var completer = document.getElementById("region").autocompleter;
completer.setExtraParams({"countryId" : $("#countryId").val()});
completer.flushCache()
[/code]
他就是来赋值参数的。当你选择国家后,生成了countryId,然后把countryId 赋值给区域autocomplete,在区域再查询的时候,在action中就可以得到这个countryId. 在action 中定义String countryId .就可以得到这个countryId;
selectItemForCountry(li) 方法是来得到你循环国家list,然后处理得到你需要得数据。
在hotelconfigforselect.ftl 页面中循环了LIST autocomplete 会自动给你加上li标签。
然后我们可以通过这个li标签来得到我们的数据。