最近在项目中使用jquery autocomplete,感觉使用起来蛮方便。主要能解决快速自动填充,还能解决连选问题。例如要选择国家,然后定位选择区域类似这样的问题。
首先要有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
<!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>
我们来看country.js
这段代码:
var completer = document.getElementById("region").autocompleter;
completer.setExtraParams({"countryId" : $("#countryId").val()});
completer.flushCache()
他就是来赋值参数的。当你选择国家后,生成了countryId,然后把countryId 赋值给区域autocomplete,在区域再查询的时候,在action中就可以得到这个countryId. 在action 中定义String countryId .就可以得到这个countryId;
selectItemForCountry(li) 方法是来得到你循环国家list,然后处理得到你需要得数据。
在hotelconfigforselect.ftl 页面中循环了LIST autocomplete 会自动给你加上li标签。
然后我们可以通过这个li标签来得到我们的数据。
分享到:
相关推荐
NULL 博文链接:https://canrry.iteye.com/blog/750679
Jquery autocomplete插件使用
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
layui自动填充插件,使用教程配合https://www.cnblogs.com/aeolian/p/11993836.html#autoid-6-0-0
jquery文本框自动补全完整实例 ajax autocomplete
jquery easyui TagBox with Autocomplete ajax请求方式自动填充
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
jquery ui autocomplete实现自动填充
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大
jquery.autocomplete.min.js文本框的自动填充控件,jquery解决了跨浏览器问题。
一个jquery插件,可以实现智能匹配。调用较为方便。
AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
jQuery的Autocomplete(自动完成、自动填充)插件
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能,下面的代码是自己手写的,喜欢的朋友可以尝试操作下
文本自动填充,http://blog.csdn.net/linlinv3/article/details/38516661 可以看具体例子,官网写的太含糊了。
jQuery.autocomplete 是jquery的流行插件,,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
Html登录表单经常被自动填充,有的甚至用户从来没有登录过的网站也会有自动填充,甚是让人讨厌。 Mozilla developer documentation 建议使用表单设置属性 tautocomplete=”off” 来阻止浏览器从cache获取数据填充...