`
yulon
  • 浏览: 118279 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery autoComplete 在实际项目的运用

阅读更多



 1、在使用该插件前先在页面引入以下js文件:

<script type="text/javascript" src="${basePath}ps/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/thickbox-compressed.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.autocomplete.js"></script>

 引入以下css文件:

<link rel="stylesheet" href="${basePath}js/autocomplete/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="${basePath}js/autocomplete/thickbox.css" type="text/css" />

 

2、页面js关键代码:

$().ready(function() {
		    $("#nameKey").autocomplete("${basePath}/search/productAutoComplete.action", {   
				   multiple: false,     
				   width:150,     
				   max:50,     
				   multipleSeparator: '',    
				   dataType: 'json',     
				  //加入对返回的json对象进行解析函数,函数返回一个数组       
				   parse: function(data) {   
				     var rows = [];   
				     for(var i=0; i<data.length; i++){ 
				      rows[rows.length] = {    
				        data:data[i].productName,    
				        value:data[i].productName,    
				        result:data[i].productName    
				        };    
				      }   
				   return rows;   
				     },   
				   formatItem: function(row, i, n) {   
				      return row;         
				  }   
			});  
		});

 解析: 1、nameKey对应的是页面上input的id,如下:

<input type="text" value="${nameKey}" id="nameKey" name="nameKey" class="mainkey" title="产品关键字"/>

 

2、向后台获取的是一个json格式的数据,后台处理关键代码如下:

public String productAutoComplete() throws Exception{
		 super.getResponse().setCharacterEncoding("utf-8");
		  super.getResponse().setContentType("text/html; charset=utf-8");
		  PrintWriter out = super.getResponse().getWriter();  
		  nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");
		  List<ProductInfo> results=super.productInfoService.findAllNeedProductInfo(nameKey, 0, 10);
		  List<ProductAutoView>  pavList = new ArrayList<ProductAutoView>();
		  for(ProductInfo pi : results){
			  pavList.add(new ProductAutoView(pi.getName()));
		  }
		  JSONArray jsonArray = JSONArray.fromObject(pavList); 
		  out.print(jsonArray.toString());   
		  out.flush();   
		  out.close();   
		return null;
	}

 注意: 页面传过来的参数名默认是"q",为了防止中文乱码,还要对数据进行转码,如下:

nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");

 

3、当输入功能时,返回给客户端的数据如下:

[{"productName":"未分类-未分类笔记本包-劲量多功能充 XP1000"},{"productName":"多功能一体机-惠普-HP Deskjet B209a 多功能一体机"},{"productName":"多功能一体机-惠普-HP 2488 喷墨一体机"},{"productName":"多功能一体机-惠普-HP J4660喷墨一体机"},{"productName":"多功能一体机-惠普-HP OJ J3606 CN552A 多功能传真一体机"},{"productName":"多功能一体机-惠普-HP OJ 4500 CM754A desktop 彩色传真一体机(标准版)"},{"productName":"办公用品-齐心文具-A615  多功能票夹"},{"productName":"多功能一体机-惠普-HP 4308喷墨一体机"},{"productName":"多功能一体机-爱普生-EPSON ME330 喷墨一体机"},{"productName":"IP09-AMB-4001A 多功能鼠标垫"}]

4、页面体现如下:

 

 

  • 大小: 8.8 KB
分享到:
评论
2 楼 yulon 2011-10-18  
w156445045 写道
nameKey JSONArray  getResponse()  getRequest()  我的都报错呢
这些参数都是哪来的呢?谢谢罗~

nameKey 是action里面的一个属性,有对应的get,set方法;JSONArray  是json-lib包提供的json工具。getResponse() ,getRequest()是父类封装的方法
1 楼 w156445045 2011-10-17  
nameKey JSONArray  getResponse()  getRequest()  我的都报错呢
这些参数都是哪来的呢?谢谢罗~

相关推荐

    jquery autocomplete下载.rar

    开发者可以通过查看和修改这个文件来了解如何在实际项目中集成 Autocomplete。 - **jquery.autocomplete.js**:这是核心的 JavaScript 文件,包含了 Autocomplete 插件的所有功能代码。通过调用这个插件,我们可以...

    jQuery AutoComplete使用实例

    在本文中,我们将深入探讨如何在项目中集成并配置 jQuery AutoComplete,以及它的一些关键功能和应用场景。 ### 1. 引入 jQuery 和 AutoComplete 首先,确保在 HTML 文件中引入了 jQuery 和 AutoComplete 的 CSS ...

    jquery.autocomplete js包

    **jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件,主要用于实现输入框的...在实际项目中,结合自身需求,灵活运用这些知识点,可以创建出高效且用户体验优秀的自动补全功能。

    Jquery AutoComplete的使用方法实例

    本篇将详细介绍如何使用 jQuery AutoComplete 实现这一功能,并提供一个实际的案例分析。 **一、jQuery AutoComplete 插件安装** 在开始之前,你需要确保你的项目中已经包含了 jQuery 库。如果你还没有,可以从...

    Jquery autocomplete插件使用

    jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入的效率和体验。...在实际开发中,根据项目特性和需求,可能还需要对样式、行为等进行更细致的定制。

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

    《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框...无论是在小型项目还是大型企业级应用中,jQuery Autocomplete都是一款不可或缺的组件。

    jquery.autocomplete.js

    本文将深入探讨jQuery Autocomplete的核心原理、使用方法以及其在实际项目中的应用。 首先,让我们明确一下标题中的“jquery.autocomplete.js”——这是一个基于jQuery库的Autocomplete插件,它的主要功能是为HTML...

    jquery autocomplete

    jQuery Autocomplete在实际项目中广泛应用,如搜索引擎、电商商品搜索、用户输入地址等。为了提升性能和用户体验,可以考虑以下优化策略: 1. 使用缓存:对于频繁查询的数据源,可以先进行本地缓存,减少网络请求。...

    jquery.autocomplete.js&css.rar

    《jQuery Autocomplete插件详解与应用实践》 ...通过理解并熟练运用`jquery.autocomplete.js`和`jquery.autocomplete.css`,开发者可以快速构建出符合项目需求的自动完成组件,从而提升网站的用户体验。

    jQuery UI Autocomplete是jQuery UI的自动完成组件

    在实际项目中,jQuery UI Autocomplete可以与其他jQuery UI组件结合使用,如Dialog、Accordion等,构建出更复杂的用户界面。在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的...

    Jquery AutoComplete

    在实际项目中,jQuery AutoComplete常用于搜索框、地址选择、商品分类筛选等场景。例如,电商平台的搜索框可以通过AutoComplete提供实时的商品或类目建议,提高用户找寻商品的效率。 总结,jQuery AutoComplete是...

    jquery.autocomplete 类包.rar

    《jQuery Autocomplete插件详解与应用》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,jQuery ...在实际项目中,灵活运用和深入理解jQuery Autocomplete插件,无疑将使你的Web开发技能更上一层楼。

    jquery.autocomplete.js 自动补全

    《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。...在实际开发过程中,可以根据项目需求灵活调整配置,实现更加个性化和人性化的自动补全功能。

    jquery autoComplete

    《jQuery autoComplete:实现智能搜索与数据提示》 在现代网页开发中,用户界面的交互性和易用性成为了关键因素之一...在实际项目中,结合HTML、CSS和JavaScript的综合运用,我们可以创建出更加友好、高效的用户界面。

    jquery autocomplete自动补全功能实现

    要使用它,你需要在项目中引入jQuery库和jQuery UI库,通常包括`jquery.js`和`jquery-ui.js`,以及相应的CSS文件来美化界面。 1. **基础设置** 在HTML页面中,创建一个输入框并为其添加一个ID,例如`...

    [ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大)

    通过以上内容,你应该对 jQuery Autocomplete 插件有了深入的理解,可以开始在自己的项目中灵活运用,提升用户的交互体验。不过,实践是检验真理的唯一标准,理论知识结合实际操作,才能更好地掌握这一强大的工具。

    jquery自动补全代码 AutoComplete-master

    在"jQuery[1].AutoComplete-master"这个项目中,可能包含了示例代码、测试用例和文档,你可以通过查看这些文件了解如何在实际项目中应用和扩展jQuery AutoComplete。通过学习和理解这个项目,你可以更好地掌握这个...

    autoComplete

    《jQuery autoComplete:深入解析与应用》 在当今的Web开发中,用户体验是至关重要的一个环节。为了提升用户在网页上的...在实际开发过程中,结合项目需求,合理运用这些知识点,将能有效提高开发效率,降低维护成本。

    BootStrap-autocomplete模糊匹配,自动填充

    10. **集成测试**:在实际项目中,需要确保Autocomplete插件与其他组件(如其他表单控件、页面布局等)能够良好协作,进行充分的集成测试是必要的。 总的来说,掌握Bootstrap Autocomplete涉及的知识点包括前端基础...

Global site tag (gtag.js) - Google Analytics