`
hzywy
  • 浏览: 168625 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

自动补全-jquery.autocomplete.js

阅读更多
   研究了三天自动补全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网址改造了前台的静态缓存数据。这就减轻了后台服务器的压力。
分享到:
评论

相关推荐

    jquery-ui.css、jquery-ui.js下载

    6. **Autocomplete** - 自动补全功能,常见于搜索框或输入框,提高用户体验。 7. **Sortable** - 使得列表项可以拖放排序,适用于任务管理或项目列表。 8. **Resizable** - 允许用户通过拖动边角调整元素大小。 在...

    前端项目-jquery.devbridge-autocomplete.zip

    综上所述,"前端项目-jquery.devbridge-autocomplete"是一个强大而灵活的前端工具,它将jQuery的便利性和自动完成的功能结合在一起,为Web开发者提供了构建高效自动补全功能的利器。无论是简单的本地数据应用,还是...

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

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

    jquery插件jquery-ui-1.8.2.custom.min.js

    Widgets是jQuery UI的核心,包括Accordion(手风琴效果)、Autocomplete(自动补全)、Dialog(对话框)等。Effects则提供了各种动画效果,如Fade(淡入淡出)、Slide(滑动)等。Position模块提供了元素相对定位的...

    jquery.autocomplete.js 自动补全插件实例

    `jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...

    jquery自动补全插件(jquery autocomplete)

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

    jquery.autocomplete.zip

    《jQuery.autocomplete自动提示插件详解》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,例如搜索引擎的自动补全、电子商务网站的商品搜索等。jQuery库为我们提供了丰富的插件来实现这一功能,其中`...

    jquery的autocomplete(自动补全)插件

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

    jquery autocomplete下载.rar

    jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件,包括样式表、HTML 模板、...

    jQuery-Autocomplete-exaples.rar

    jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为文本输入框提供了自动补全功能,极大地提升了用户体验。在 Web 应用中,尤其是在需要用户输入搜索关键词或选择特定项时,这个插件非常实用。本篇文章将深入...

    jquery.autocomplete 类包.rar

    这个类包“jquery.autocomplete.zip”包含了实现这一功能所需的两个核心文件:`jquery.autocomplete.css`和`jquery.autocomplete.min.js`,它们一起为开发者构建自动补全搜索框提供了强大的支持。 首先,我们来了解...

    jquery.autocomplete的js+css

    综上所述,`jquery.autocomplete.js` 和 `jquery.autocomplete.css` 文件组合提供了完整的自动补全解决方案,涵盖了样式、功能和交互。它们使得开发人员能够快速构建高效、灵活且用户体验良好的搜索功能,而无需从头...

    jquery.validate.js jquery.metadata.js jquery.autocomplete.js jquery&UI; chm文档合集

    `jquery.autocomplete.js`是jQuery UI的一部分,提供了一个自动补全功能。当用户在输入框中键入字符时,该插件可以实时搜索数据库或其他数据源,展示匹配的建议列表,帮助用户快速完成输入。这对于搜索框、地址输入...

    jquery.autocomplete

    接着,引入 `jquery.autocomplete.js` 文件,这是插件的核心实现。同时,为了美观和布局,还需要引入 `jquery.autocomplete.css` 文件,该文件定义了插件的样式规则。 ### 2. 使用方法 要在网页上使用 `jQuery ...

    JQueryUI组件 JS下载

    - **Autocomplete(自动补全)**: 输入框自动填充建议,常见于搜索框。 - **Sortable(可排序)**: 允许用户通过拖放操作对列表项进行排序。 2. **jQuery-2.2.3.min.js** 这是jQuery的核心库,提供了DOM操作、...

    jquery.autocomplete.js 自动补全

    《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。为了提升用户体验,自动补全(AutoComplete)功能成为了一个不可或缺的元素,尤其是在处理大量数据输入时。...

    前端项目-jquery-autocomplete.zip

    在页面中,为需要实现自动补全功能的输入框添加 ID,例如 `searchBox`,然后在 JavaScript 中初始化插件: ```javascript $("#searchBox").autocomplete({ source: ["Item1", "Item2", "Item3"], // 可以是数组或...

    jquery.autocomplete 增加自定义查询方法

    `jQuery.autocomplete`是jQuery UI库中的一个组件,它为输入框提供了自动补全功能,极大地提升了用户体验。这个组件能够从服务器或者本地数据源获取数据,并在用户输入时动态显示匹配项。在某些情况下,我们可能需要...

    jquery.autocomplete.min.js

    jquery autocomplete 支持自动补全,可以做成类似百度搜索那样的

Global site tag (gtag.js) - Google Analytics