版权属于:
Hello World
作品采用:
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
此插件基于bootstrap
首先引入三大部分的依赖jquery、bootstrap、bs_typeadhead
<%-- jquery--%>
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%-- bs_typeadhead--%>
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
页面添加一个div容器
<input type="text" id="customerName">
部分说明:typeahead( ) 函数的source属性就是自动补全的数据的来源,来源分为静态数据和动态数据。
<script type="text/javascript">
$(function (){
$("#customerName").typeahead({
//数据的来源-静态
// source:['京东商城','阿里巴巴','百度科技公司','字节跳动','动力节点']
//数据的来源-动态
source:function(jquery,process){
//参数列表里的process是一个函数,作用是把ajax返回的data赋值给属性source。
//用户在容器中获取的关键字
//发送请求
$.ajax({
url:'workbench/transaction/queryCustomerNameByName.do?customerName'+jquery,
type:'post',
dataType:'json',
success:function (data){
process(data); //参数列表里的process是一个函数,作用是把ajax返回的data赋值给属性source。
}
});
}
});
});
ajax请求部分对应的后端代码
@RequestMapping("/workbench/transaction/queryCustomerNameByName.do")
@ResponseBody
public List<String> queryCustomerNameByName(String customerName){
List<String> customerNameList = customerService.queryCustomerNameByName();
return customerNameList;
}
评论 (0)