jquery autocomplete 实现（自动填充及连选）

neil-jh

浏览: 147794 次
性别:
来自: 上海

最近访客更多访客>>

caokuang_0

111555yuan

zftzyw

kingkwj

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (60)

社区版块

存档分类

jQuery json Struts XML XHTML

最近在项目中使用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标签来得到我们的数据。