`
lazy513
  • 浏览: 19501 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery Autocomplete

阅读更多

    前端代码

    先引用 <script type="text/javascript" src="/js/plugin/jquery.autocomplete.min.js"></script>

    <link rel="Stylesheet" href="/js/plugin/jquery.autocomplete.css" />

   

   在界面加载完成后触发

$(document).ready(function () {
	autoComple();
});

 

function autoComple(){
	$("#s_customerId").autocomplete("/cnf/queryCnfCustomerBycId.action",
	{
		 max: 12,    //列表里的条目数
         minChars: 3,    //自动完成激活之前填入的最小字符
         width: 300,     //提示的宽度,溢出隐藏
         scrollHeight: 300,   //提示的高度,溢出显示滚动条
         matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
         autoFill: false,    //自动填充
         parse: function(data) {  //这里是转换后台的数据,因为后台返回的时候是一个字符串,不转换会只显示一行
            return $.map(eval(data), function(row) {
                return {
                    data: row,
                    value: row.name,
                    result: row.name + " <" + row.code + ">"
                }
            });
         },
         formatItem: function(data, i, max) {
             return data.code + '【' + data.name + '】';
         },
         formatMatch: function(data, i, max) {
             return data.code + data.name;
         },
         formatResult: function(data) {
             return data.code;
         }
     }).result(function(event, data, formatted) {
     	$("#s_customerId").val(data.code);
     });
}

    result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。

    formatItem、formatMatch、formatResult是自定提示信息的关键。

 

    formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。

 

    formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,

 

    formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。

 

    台代码,具体实现代码可以忽略,就是查询数据后组装成json数组,返回。

  

public void queryCustomerIdAndName(){
		
		CnfCustomerInfo cust = new CnfCustomerInfo();
		cust.setCustomerId(q); //默认的参数变量,奇葩
		try{
			List<Object> list = this.cnfService.queryForList("cnf.queryCustomerBycId",cust,10);
			CnfCustomerInfo info = null;
			JSONObject json = null;
			JSONArray array = new JSONArray(); //添加到jsonArray数组
			for(Object obj : list){
				json = new JSONObject();
				info = (CnfCustomerInfo) obj;
				json.put("code", info.getCustomerId());
				json.put("name", info.getCustomerNameCh());
				array.add(json);
			}
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().write(array.toString());
		
		}catch (Exception e) {
			e.printStackTrace();
		}
	}

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    jquery autocomplete下载.rar

    《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...

    jquery autocomplete

    **jQuery Autocomplete 知识详解** jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,极大地提升了用户在网站上的交互体验。这个插件源自于 jQuery UI 库,但也可以单独使用。...

    jquery autocomplete 动态补全例子有说明ajax加载

    jQuery Autocomplete是一款非常实用的JavaScript插件,它允许用户在输入框中输入文字时,根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用,如搜索框、表单输入等。在给定的“jquery ...

    jquery autocomplete dwr结合 修改Data

    标题中的“jQuery Autocomplete DWR结合 修改Data”指的是在Web开发中使用jQuery UI的Autocomplete组件与Direct Web Remoting (DWR)技术相结合,并对数据进行定制化处理的方法。jQuery Autocomplete是一个流行的UI...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    ### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...

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

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

    JQuery autocomplete Ajax分页控件

    `jQuery autocomplete` 是jQuery UI库中的一个组件,它为输入框提供了自动完成的功能,能够根据用户输入的文本动态地从服务器获取并显示建议的匹配项。这个功能对于提高用户体验,特别是处理大量数据时,如搜索或者...

    Jquery AutoComplete

    **jQuery AutoComplete 知识详解** `jQuery AutoComplete` 是一个非常流行的 JavaScript 库,它扩展了 jQuery UI 框架,为输入框提供自动补全功能。这个组件广泛应用于网页表单,尤其是在用户需要输入搜索关键词...

    jQuery AutoComplete使用实例

    **jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,能够极大地提升用户体验。这个插件基于 jQuery 库,因此需要先引入 jQuery 才能使用。在本文...

    jquery autoComplete

    **jQuery autoComplete 知识点详解** `jQuery autoComplete` 是一个基于 jQuery 库的插件,它为网页表单输入框提供了自动完成的功能。这个插件能够帮助用户在输入时快速匹配并显示预先设定的数据集,通常用于提升...

    jQuery Autocomplete

    **jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态的下拉建议。这个功能在很多网站上都能看到,比如百度搜索框的提示效果,它极大地提升了用户体验,减少了用户输入的负担,提高了...

    jquery autocomplete js 文件

    **jQuery Autocomplete 知识点详解** jQuery Autocomplete 是一个非常流行且实用的插件,它为HTML输入字段提供自动完成功能。这个插件基于 jQuery 库,使得在网页中实现类似百度搜索框那样的动态下拉建议变得简单易...

    Jquery Autocomplete 拼音首字母匹配

    1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...

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

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    jquery自动补全插件(jquery autocomplete)

    **jQuery AutoComplete 插件详解** jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 ...

    jquery autocomplete示例

    **jQuery Autocomplete 示例详解** jQuery Autocomplete 是一个非常实用的插件,用于在输入框中实现自动补全功能。这个插件广泛应用于各种网站,帮助用户快速找到他们想要输入的信息,提高了用户体验。在这个示例中...

    Jquery AutoComplete 使用demo

    **jQuery AutoComplete 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,广泛应用于网页表单、搜索框等场景,以提高用户体验。这个插件允许开发者从本地数组或...

    jquery autocomplete 完成控件中文修正

    jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...

    jquery Autocomplete插件,搜索自动完成

    jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html

Global site tag (gtag.js) - Google Analytics