Bootstrap 搜索提示插件使用

<div class="input-group">
<input id="teacheringPlanPersonnelReportSignModalTeNameInput" name="tcname" type="text" class="form-control" autocomplete="off" placeholder="请输入教师姓名或手机号" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>

<script type="application/javascript">
$(function(){
$("#teacheringPlanPersonnelReportSignModalTeNameInput").bsSuggest({
allowNoKeyword: false,   //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
multiWord: true,         //以分隔符号分割的多关键字支持
separator: ",",          //多关键字支持时的分隔符，默认为空格
getDataMethod: "url",    //获取数据的方式，总是从 URL 获取
url: 'searchList', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
//调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
fnAdjustAjaxParam: function(keyword, opts) {
//console.log('ajax 请求参数调整：', keyword, opts);
var pattern=/^[0-9]*[1-9][0-9]*$/;
var flag = pattern.test(keyword);
return {
data: {
tcname:keyword,
ifPhone:flag
}
};
},
effectiveFields:["tcname","gradeName","courseName"],
effectiveFieldsAlias:{tcname: "姓名",gradeName: "年级",courseName: "班级"},
idField: "teId",
keyField: "tcname",
showHeader: true,
// url 获取数据时，对数据的处理，作为 fnGetData 的回调函数
fnProcessData: function (json) {
var index, len, data = {value: []};
if (!json || !json.datas || json.datas.length === 0) {
return false;
}

len = json.datas.length;

for (index = 0; index < len; index++) {
data.value.push({
teId:json.datas[index].teId,
tcname: json.datas[index].tcname,
gradeId:json.datas[index].gradeId,
gradeName: json.datas[index].gradeName,
courseId:json.datas[index].courseId,
courseName: json.datas[index].courseName
});
}
data.defaults = 'baidu';
//字符串转化为 js 对象
return data;
}
}).on('onDataRequestSuccess', function (e, result) {
//console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, keyword, data) {
//console.log(data.teId,data.gradeId,data.courseId);
$("#teacheringPlanPersonnelReportSignModalTeIdInput").attr("value",data.teId);
$("#teacheringPlanPersonnelReportSignModalCourseIdInput").attr("value",data.courseId);
$("#teacheringPlanPersonnelReportSignModalGradeIdInput").attr("value",data.gradeId);
//console.log('onSetSelectValue: ', keyword, data);
}).on('onUnsetSelectValue', function () {
//console.log("onUnsetSelectValue");
$("#teacheringPlanPersonnelReportSignModalTeIdInput").attr("value","");
$("#teacheringPlanPersonnelReportSignModalCourseIdInput").attr("value","");
$("#teacheringPlanPersonnelReportSignModalGradeIdInput").attr("value","");
});
});
</script>
</div>