研究了三天自动补全jquery.autocomplete.js。其中优化的程度很大。特别是和后台的交互。我采用的是前台静态缓存。
1.加载的js、css
<script type="text/javascript" src="/front/scripts/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/front/scripts/autocomplete/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css" />
<input type="text" name="fund_code" id="fund_code" />
<div id="getdata"></div>
2、autocomplete主体
<%-- 自动补全代码--%>
<script type="text/javascript">
$(document).ready(function(){
var data="";
$.ajax({
type: "post",
url: "AnnouncementAction.action",
dataType: "text",
success: function(msg)
{
$("#getdata").data("getdata",msg);//1、存放数据
},
async:false
});
//alert($("#getdata").data("getdata"));
});
$(function(){
var data = $("#getdata").data("getdata");//2、获取数据
var datas = eval("(" + data + ")")//数据转换成json格式
$("#fund_code").autocomplete(datas, {
minChars: 1,
matchCase:false,//不区分大小写
autoFill: false,
max: 10,
width:196,
formatItem: function(row, i, max,term) {
var v = $("#fund_code").val();
return row.name + " (" + row.code + ")";
if(row.code.indexOf(v) == 0 || row.name.indexOf(v)==0)
{
return row.name + " (" + row.code + ")";
}
else
return false;
},
formatMatch: function(row, i, max) {
return row.name + " (" + row.code+")";
},
formatResult: function(row) {
// alert(row.code);
return row.code;
},
reasultSearch:function(row,v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if(row.data.code.indexOf(v) == 0 || row.data.name.indexOf(v) == 0)
{
return row;
}
else
return false;
}
});
});</script>
3、后台 这里是根据我的项目来拼接json,准确的来说是拼接String ,因为我前台转换为json
public void Autocomplete(){
//getResponse().setCharacterEncoding("utf-8"); //必须
FundBusService fs = new FundBusService();
List<DataRow> list = fs.queryFundLike();
System.out.println(list.get(0).getString("investadvisorabbrname"));
String jsonStr="";
for(int i=0;i<list.size();i++){
jsonStr += "{name:"+'"'+list.get(i).getString("secuabbr")+'"'+",code:"+'"'+list.get(i).getString("secucode")+'"'+"},";
}
String jsonStr_new =jsonStr.substring(0,jsonStr.length()-1);
String jsonStr_final="["+jsonStr_new+"]";
try {
getResponse().getWriter().print(jsonStr_final);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
这是我拼接的测试代码
public static void main(String[] args) {
String json = "{name:\"深圳\",code:\"00001\","+
"spell:\"sgs\"},{name:\"广州\",code:\"00001\","+
"spell:\"sghs\"}";
String ss ="["+json+"]";
System.out.println(ss);
}
我是根据http://www.cnblogs.com/eflylab/archive/2009/09/18/1569043.html网址改造了前台的静态缓存数据。这就减轻了后台服务器的压力。
分享到:
相关推荐
6. **Autocomplete** - 自动补全功能,常见于搜索框或输入框,提高用户体验。 7. **Sortable** - 使得列表项可以拖放排序,适用于任务管理或项目列表。 8. **Resizable** - 允许用户通过拖动边角调整元素大小。 在...
综上所述,"前端项目-jquery.devbridge-autocomplete"是一个强大而灵活的前端工具,它将jQuery的便利性和自动完成的功能结合在一起,为Web开发者提供了构建高效自动补全功能的利器。无论是简单的本地数据应用,还是...
jQuery Autocomplete.js 插件是提高网页表单输入效率的好帮手,通过与Ajax的结合,能够轻松实现动态数据的自动补全功能。在实际开发中,可以根据具体需求灵活配置和扩展,以满足各种复杂场景。记得在使用过程中注意...
Widgets是jQuery UI的核心,包括Accordion(手风琴效果)、Autocomplete(自动补全)、Dialog(对话框)等。Effects则提供了各种动画效果,如Fade(淡入淡出)、Slide(滑动)等。Position模块提供了元素相对定位的...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...
jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...
《jQuery.autocomplete自动提示插件详解》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,例如搜索引擎的自动补全、电子商务网站的商品搜索等。jQuery库为我们提供了丰富的插件来实现这一功能,其中`...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件,包括样式表、HTML 模板、...
jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为文本输入框提供了自动补全功能,极大地提升了用户体验。在 Web 应用中,尤其是在需要用户输入搜索关键词或选择特定项时,这个插件非常实用。本篇文章将深入...
这个类包“jquery.autocomplete.zip”包含了实现这一功能所需的两个核心文件:`jquery.autocomplete.css`和`jquery.autocomplete.min.js`,它们一起为开发者构建自动补全搜索框提供了强大的支持。 首先,我们来了解...
综上所述,`jquery.autocomplete.js` 和 `jquery.autocomplete.css` 文件组合提供了完整的自动补全解决方案,涵盖了样式、功能和交互。它们使得开发人员能够快速构建高效、灵活且用户体验良好的搜索功能,而无需从头...
`jquery.autocomplete.js`是jQuery UI的一部分,提供了一个自动补全功能。当用户在输入框中键入字符时,该插件可以实时搜索数据库或其他数据源,展示匹配的建议列表,帮助用户快速完成输入。这对于搜索框、地址输入...
接着,引入 `jquery.autocomplete.js` 文件,这是插件的核心实现。同时,为了美观和布局,还需要引入 `jquery.autocomplete.css` 文件,该文件定义了插件的样式规则。 ### 2. 使用方法 要在网页上使用 `jQuery ...
- **Autocomplete(自动补全)**: 输入框自动填充建议,常见于搜索框。 - **Sortable(可排序)**: 允许用户通过拖放操作对列表项进行排序。 2. **jQuery-2.2.3.min.js** 这是jQuery的核心库,提供了DOM操作、...
《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。为了提升用户体验,自动补全(AutoComplete)功能成为了一个不可或缺的元素,尤其是在处理大量数据输入时。...
在页面中,为需要实现自动补全功能的输入框添加 ID,例如 `searchBox`,然后在 JavaScript 中初始化插件: ```javascript $("#searchBox").autocomplete({ source: ["Item1", "Item2", "Item3"], // 可以是数组或...
`jQuery.autocomplete`是jQuery UI库中的一个组件,它为输入框提供了自动补全功能,极大地提升了用户体验。这个组件能够从服务器或者本地数据源获取数据,并在用户输入时动态显示匹配项。在某些情况下,我们可能需要...
jquery autocomplete 支持自动补全,可以做成类似百度搜索那样的