`
neil-jh
  • 浏览: 147646 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery autocomplete 实现(自动填充及连选)

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




 
分享到:
评论
3 楼 demojava 2010-10-22  
!你后台数据是返回的是xml。json....劳烦发个后台数据。。谢了
2 楼 suiye007 2010-03-03  
确实学习了,不错!
1 楼 mark.china 2008-12-03  
 

相关推荐

    jquery-autocomplete 自动填充插件参数使用说明

    总结,jQuery UI Autocomplete插件是一个强大且灵活的工具,能够帮助开发者快速实现自动填充功能。通过理解并巧妙运用其提供的参数,可以定制出满足各种需求的搜索体验,从而提升网站或应用的用户体验。无论是在小型...

    jquery的autocomplete(自动补全)插件

    **jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...

    jquery自动补全插件(jquery autocomplete)

    **jQuery AutoComplete ...总结,jQuery AutoComplete 插件通过简单的配置和使用,可以实现强大的自动补全功能,提高用户体验。结合前端与后端接口,可以构建出高效的动态搜索功能。希望这个插件能为你的项目带来便利。

    jquery.autocomplete.js使用示例,可直接运行

    jQuery Autocomplete.js 插件是提高网页表单输入效率的好帮手,通过与Ajax的结合,能够轻松实现动态数据的自动补全功能。在实际开发中,可以根据具体需求灵活配置和扩展,以满足各种复杂场景。记得在使用过程中注意...

    jqueryUI的Autocomplete实现代码

    **jQuery UI Autocomplete** 是一个强大的功能,它允许用户在输入框中输入文字时自动提示相关的建议信息。这个功能在各种网页应用中广泛使用,比如搜索引擎、表单填充、产品搜索等,极大地提升了用户体验。本篇文章...

    jquery autocomplete dwr结合 修改Data

    jQuery Autocomplete是一个流行的UI功能,它提供了自动补全输入框的功能,而DWR则是一种在浏览器和服务器之间进行异步通信的技术。 首先,让我们详细了解一下jQuery Autocomplete。这是一个jQuery插件,它允许用户...

    jquery Autocomplete 仿百度搜索 只能搜索提示

    在IT行业中,jQuery Autocomplete是一个常用的插件,用于实现类似于搜索引擎的自动补全功能。它为用户提供了方便快捷的输入体验,尤其适用于大型数据集的筛选。本项目以"jQuery Autocomplete 仿百度搜索 只能搜索...

    Jquery AutoComplete 使用demo

    在提供的 `JqueryAutoCompleteDemo` 压缩包中,通常包含了完整的 HTML、CSS 和 JavaScript 文件,展示了如何使用 jQuery AutoComplete 实现自动填充功能,包括本地数组和后台数据两种情况。通过分析和运行这个示例,...

    jquery 自动提示autocomplete

    jQuery Autocomplete是一款非常流行的JavaScript库,它为网页输入框提供了自动提示功能,极大地提升了用户体验。这个功能在许多网站上被广泛使用,例如搜索框、表单填充等场景。本篇文章将深入探讨jQuery ...

    autocomplete实现百度搜索自动填充特效

    标题中的“autocomplete实现百度搜索自动填充特效”是指在网页中实现类似于百度搜索框的自动完成功能,这种功能能够根据用户输入的字符实时提供匹配的建议列表,提高用户的输入效率和搜索体验。在Web开发中,这是一...

    jQuery Autocomplete

    jQuery Autocomplete 不仅限于搜索框,还可以用于表单字段的自动填充、产品推荐、地址自动补全等多种场景,尤其是在需要快速、智能地提供用户可能感兴趣的信息时。 综上所述,jQuery Autocomplete 是一个强大的工具...

    jquery-autocomplete 自动完成

    1. **引入资源**:首先需要在页面中引入jQuery库和Autocomplete插件的JS及CSS文件。 2. **初始化插件**:选择要应用的输入元素,通过`.autocomplete()`方法启动插件。 3. **设置数据源**:可以是数组、函数或者Ajax...

    带数据库的 jquery-autocomplete-php

    【标题】"带数据库的 jquery-autocomplete-php" 涉及到的是一个使用jQuery库实现的自动补全功能,结合PHP和MySQL数据库来提供动态搜索建议。jQuery UI的Autocomplete插件是这个功能的核心,它允许用户在输入框中输入...

    jquery.autocomplete.js

    这个插件,以其便捷性和强大的功能,使得在文本框中实现自动填充变得轻而易举。本文将深入探讨jQuery Autocomplete的核心原理、使用方法以及其在实际项目中的应用。 首先,让我们明确一下标题中的“jquery....

    jquery文本框自动补全完整实例 ajax autocomplete

    本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,即"autocomplete"。Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器进行异步数据交换,使得用户体验更加...

    Jquery autocomplete插件使用

    jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入的效率和体验。这个插件可以根据用户输入的字符动态地从服务器或者本地数据源获取匹配项,并在输入框下方...

    jquery easyui TagBox with Autocomplete ajax请求方式自动填充

    在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中,主要涉及了jQuery EasyUI的TagBox组件,以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件,...

    autocomplete--jquery自动填充

    在实际项目中,jQuery Autocomplete 可以与后端数据库配合,实现动态搜索建议,如在电商网站的商品搜索框中,用户输入关键词后,系统实时返回匹配的商品列表。 9. **版本更新** 提供的文件 `jquery-ui-1.10.2....

    jquery自动填充插件

    而jQuery自动填充插件(jQuery autoComplete)是jQuery库的一个扩展,专为创建智能搜索和自动补全功能而设计。这个插件能够帮助用户在输入框中快速找到匹配项,提高用户体验,尤其适用于大型数据集的搜索。 **插件...

Global site tag (gtag.js) - Google Analytics