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;//Ŀǰ��ù�������