bigautocomplete 搜索补全

1.首先,要引入以下两个文件

jquery.bigautocomplete.css

jquery.bigautocomplete.js

jquery-1.8.0.min.js

2. 

<input type="text" class="tt">
 
      $(function(){
            $("body").on("keydown",".tt", function(e) {
                $(".chooseCode").removeClass("chooseCode");
                $(this).addClass("chooseCode");
                var dateValue="";
                $(".chooseCode").bigAutocomplete({
                    width: 125,
                    /*  url: "webpage/com/hrlx/purchase/plan/mune.js", */
                    matchSubset:true,//是否启用缓存
                    cacheLength: 5,//缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
                    data:ttss,
                    multiple:true,
                    multipleSeparator:",",
                    callback: function(data) {
                       // $(".chooseCode").parent().parent().find(".purchaseName").val(data.result);
                    }
                });
            });
        });
    </script>

3.实现效果



4.引用 的json格式为:


    {

      “id”:“1”,

      “text”:“测试1”

    },

   {

  “id”:“2”,

  “text”:“测试2”

}

]

5.资料地址 :点击打开链接


6.以下是后台生成的json格式的js文件:

	@RequestMapping(params = "selectByOne")
	@ResponseBody
	public void selectByOne(boolean isNew,HttpServletRequest rq) throws java.io.IOException, IOException {
        String  url= rq.getRealPath("/");
		CriteriaQuery cq = new CriteriaQuery(LbPurchaseCatalogEntity.class);
		List<LbPurchaseCatalogEntity> purchaseList = systemService
				.getListByCriteriaQuery(cq, false);
        String  varTitle= "var ttss= ";
        String  sb="";
     if(purchaseList!=null&&purchaseList.size()>0){
         sb+="[";
	for(LbPurchaseCatalogEntity pl:purchaseList ){
		sb+="{";
		sb+='"'+"title"+'"';
		sb+=':';
		sb+='"'+pl.getCatalogCode()+'"';
		sb+=",";
		sb+='"'+"result"+'"';
		sb+=':';
		String name= string2Unicode(pl.getCatalogName());
		sb+='"'+name+'"';
		sb+="},";
	}
	 sb+="]";
	
   }
     sb=sb.replace(" ", "");
     
     write(varTitle+sb,url);

		
	}
	
	
	public static void write(String args,String url) throws java.io.IOException, IOException { 
		  File file=new File(url+"webpage/com/hrlx/purchase/budget/mune.js");
		     
		   if (file.exists()==false) {
		    FileWriter in;
		    try {
		     in = new FileWriter(file);
		     
		       in.write(args);
		     in.close();
		    } catch (FileNotFoundException e) {
		     // TODO 自动生成的 catch 块
		     e.printStackTrace();
		    }
		    
		   }

}
	
	
	/**
	 * 字符串转换unicode
	 */
	public static String string2Unicode(String string) {
        char[] utfBytes = string.toCharArray();   // 
        String unicodeBytes = "";     
        for (int byteIndex = 0; byteIndex < utfBytes.length; byteIndex++) {     
            String hexB = Integer.toHexString(utfBytes[byteIndex]);   //转换为16进制整型字符串  
              if (hexB.length() <= 2) {     
                  hexB = "00" + hexB;     
             }     
             unicodeBytes = unicodeBytes + "\\u" + hexB;     
        }         
        return unicodeBytes; 
	    

	}

7.页面异步请求后台生成js

  $.ajax({
 		   type: "post",
 		   url: "lbPurchaseCatalogController.do?selectByOne",
 		   success: function(data){
 		      
 		   }
 		});  

8.

(function($){
	var bigAutocomplete = new function(){
		this.currentInputText = null;//Ŀǰ��ù�������
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值