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
分享到:
相关推荐
开发者可以通过查看和修改这个文件来了解如何在实际项目中集成 Autocomplete。 - **jquery.autocomplete.js**:这是核心的 JavaScript 文件,包含了 Autocomplete 插件的所有功能代码。通过调用这个插件,我们可以...
在本文中,我们将深入探讨如何在项目中集成并配置 jQuery AutoComplete,以及它的一些关键功能和应用场景。 ### 1. 引入 jQuery 和 AutoComplete 首先,确保在 HTML 文件中引入了 jQuery 和 AutoComplete 的 CSS ...
**jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件,主要用于实现输入框的...在实际项目中,结合自身需求,灵活运用这些知识点,可以创建出高效且用户体验优秀的自动补全功能。
本篇将详细介绍如何使用 jQuery AutoComplete 实现这一功能,并提供一个实际的案例分析。 **一、jQuery AutoComplete 插件安装** 在开始之前,你需要确保你的项目中已经包含了 jQuery 库。如果你还没有,可以从...
jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入的效率和体验。...在实际开发中,根据项目特性和需求,可能还需要对样式、行为等进行更细致的定制。
《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框...无论是在小型项目还是大型企业级应用中,jQuery Autocomplete都是一款不可或缺的组件。
本文将深入探讨jQuery Autocomplete的核心原理、使用方法以及其在实际项目中的应用。 首先,让我们明确一下标题中的“jquery.autocomplete.js”——这是一个基于jQuery库的Autocomplete插件,它的主要功能是为HTML...
jQuery Autocomplete在实际项目中广泛应用,如搜索引擎、电商商品搜索、用户输入地址等。为了提升性能和用户体验,可以考虑以下优化策略: 1. 使用缓存:对于频繁查询的数据源,可以先进行本地缓存,减少网络请求。...
《jQuery Autocomplete插件详解与应用实践》 ...通过理解并熟练运用`jquery.autocomplete.js`和`jquery.autocomplete.css`,开发者可以快速构建出符合项目需求的自动完成组件,从而提升网站的用户体验。
在实际项目中,jQuery UI Autocomplete可以与其他jQuery UI组件结合使用,如Dialog、Accordion等,构建出更复杂的用户界面。在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的...
在实际项目中,jQuery AutoComplete常用于搜索框、地址选择、商品分类筛选等场景。例如,电商平台的搜索框可以通过AutoComplete提供实时的商品或类目建议,提高用户找寻商品的效率。 总结,jQuery AutoComplete是...
《jQuery Autocomplete插件详解与应用》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,jQuery ...在实际项目中,灵活运用和深入理解jQuery Autocomplete插件,无疑将使你的Web开发技能更上一层楼。
《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。...在实际开发过程中,可以根据项目需求灵活调整配置,实现更加个性化和人性化的自动补全功能。
《jQuery autoComplete:实现智能搜索与数据提示》 在现代网页开发中,用户界面的交互性和易用性成为了关键因素之一...在实际项目中,结合HTML、CSS和JavaScript的综合运用,我们可以创建出更加友好、高效的用户界面。
要使用它,你需要在项目中引入jQuery库和jQuery UI库,通常包括`jquery.js`和`jquery-ui.js`,以及相应的CSS文件来美化界面。 1. **基础设置** 在HTML页面中,创建一个输入框并为其添加一个ID,例如`...
通过以上内容,你应该对 jQuery Autocomplete 插件有了深入的理解,可以开始在自己的项目中灵活运用,提升用户的交互体验。不过,实践是检验真理的唯一标准,理论知识结合实际操作,才能更好地掌握这一强大的工具。
在"jQuery[1].AutoComplete-master"这个项目中,可能包含了示例代码、测试用例和文档,你可以通过查看这些文件了解如何在实际项目中应用和扩展jQuery AutoComplete。通过学习和理解这个项目,你可以更好地掌握这个...
《jQuery autoComplete:深入解析与应用》 在当今的Web开发中,用户体验是至关重要的一个环节。为了提升用户在网页上的...在实际开发过程中,结合项目需求,合理运用这些知识点,将能有效提高开发效率,降低维护成本。
10. **集成测试**:在实际项目中,需要确保Autocomplete插件与其他组件(如其他表单控件、页面布局等)能够良好协作,进行充分的集成测试是必要的。 总的来说,掌握Bootstrap Autocomplete涉及的知识点包括前端基础...