组长给了一个任务，去写一个demo，demo的功能是搜索自动补全，所幸给了一个框架的示例，于是就去看着给的说明写了个demo
html+js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<title>模糊查询</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body >
<h3>下拉框示例</h3>
<div class="input-group" style="width:240px;">
<input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px">
<div class="input-group-btn" style="width:1px;">
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script src="tether.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-suggest.js"></script>
<script>
$("#admdirector").bsSuggest({
indexId: 4, //data.value 的第几个数据，作为input输入框的内容
indexKey: 0, //data.value 的第几个数据，作为input输入框的内容
allowNoKeyword: false, //是否允许无关键字时请求数据
multiWord: false, //以分隔符号分割的多关键字支持
separator: ",", //多关键字支持时的分隔符，默认为空格
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
effectiveFields:["chargeMonths","giveDays","price","remarks"],
effectiveFieldsAlias:{chargeMonths: "充值月数",giveDays:"赠送天数",price:"价格",remarks:"备注"},
showHeader: true,
url: 'http://localhost:3101/ChargeRules/queryChargeRules?remarks=',
processData: function(json){
var i, len, data = {value: []};
if(!json || json.obj.length == 0) {
return false;
}
len = json.obj.length;
for (i = 0; i < len; i++) {
data.value.push({
"chargeMonths": json.obj[i].chargeMonths,
"giveDays": json.obj[i].giveDays,
"price":json.obj[i].price,
"remarks":json.obj[i].remarks,
"chargeRulesId":json.obj[i].chargeRulesId
});
}
console.log(data);
return data;
}
}).on("onSetSelectValue",function(event,result){
console.log(result);
});
</script>
</body>
</html>解释一下部分没有注释的地方，有个chargeRulesId不能显示却要用到，这时用到了一个函数 onSetSelectValue,这个函数会在你选中值后把数据返回给result，这里的result里面的值有选中值的index,还有最开始设置的indexId,indexKey
展示一下效果图
