bootstrap仿百度输入框智能提示(提示信息存在于数据库中)
来源:互联网 发布:淘宝怎么打印发货单 编辑:程序博客网 时间:2024/05/22 08:07
示例图片:
百度示例
所实现示例
jsp:
<form class="form-horizontal lui-tj-bd" id="dbc_billrecharge_add_form" method="post">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="tabbable">
<div class="profile-user-info profile-user-info-striped">
<div class="profile-info-row">
<div class="profile-info-name" >缴费单位名称<font color="red">*</font></div>
<div class="profile-info-value">
<input type="hidden" value="${list.id}" name="id" class="col-xs-12 col-sm-9" />
<input type="hidden" value="${list.corpId}" id="corpId" name="corpId" class="col-xs-12 col-sm-9" />
<input type="text" value="${list.companyName}" id="companyName"name="companyName" onclick="autosearchCargono()" class="col-xs-12 col-sm-9" placeholder="必填,50字以内" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" >缴费单位代码<font color="red">*</font></div>
<div class="profile-info-value">
<input type="text" readOnly="true" value="${list.companyCode}" id="companyCode" name="companyCode" class="col-xs-12 col-sm-9" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" >缴费金额<font color="red">*</font></div>
<div class="profile-info-value">
<input type="number" value="${list.rechargeNum}" id="rechargeNum" name="rechargeNum" class="col-xs-12 col-sm-9"/>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" >缴费时间<font color="red">*</font></div>
<div class="profile-info-value">
<div class="input-group col-sm-9 col-xs-12">
<input type="text" id="rechargeTime" name="rechargeTime" value="<fmt:formatDate value="${list.rechargeTime}" pattern="yyyy-MM-dd HH:mm"/>" class="form-control datetimepicker"/>
<span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i> </span>
</div>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" >备注<font color="red">*</font></div>
<div class="profile-info-value">
<textarea class="col-sm-9 col-xs-12 " rows="5" id="note" name="note" >${list.note}</textarea>
</div>
</div>
</div>
<div class="space-24"></div>
<div>
<div class=" col-md-offset-2 col-md-9 col-xs-12">
<div class=" col-xs-6">
<button class="btn btn-sm btn-success" type="button" id="saveButton2" style="float:right;" onclick="tobaocun()">
<i class="ace-icon fa fa-check "></i>保存
</button>
</div>
<button class="btn btn-sm btn-purple" type="reset">
<i class="ace-icon fa fa-undo "></i> 重置
</button>
</div>
</div>
</div>
</div>
</div>
</form>
js:
/**
* 根据输入显示提示信息
*/
function autosearchCargono(){
$("#companyName").autocomplete({
minLength: 1,
source: function( request, response ) {
var term = request.term;
$.ajax({
url: "${base}/admin/road/billRecharge/getValue.do",
dataType: "json",
type:"post",
data:{
companyName: term
},
success: function( data ) {
response($.map( data, function( item ) {
$("#corpId").val(item.companyId)
return {
lable:item.companyId,
value:item.companyName
}
}));
}
});
}
});
}
controller 控制层:
@RequestMapping(value = "/getValue", method = RequestMethod.POST)
public @ResponseBody String getValue(String companyName){
return JSON.toJSONString(billRechargeService.getValue(companyName));
}
service 服务层:
@Override
public List<DbcBillRecharge> getValue(String companyName) {
return dbcCompanyBalanceMapper.getValue(companyName);
}
dao层:
List<DbcBillRecharge> getValue(@Param("companyName")String companyName);
mapper.xml配置文件sql:
<select id="getValue" resultMap="BaseResultMap">
select id, company_id,company_name
from dbc_company_balance
where 1=1
<if test="companyName != null and companyName != ''">
and company_name like concat ('%',#{companyName},'%')
</if>
limit 0,10
</select>
- bootstrap仿百度输入框智能提示(提示信息存在于数据库中)
- 仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器
- 仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器
- 仿百度输入框智能提示的js代码
- 仿百度智能提示搜索框
- jQuery 插件 仿百度搜索框智能提示 调用简单!
- 仿百度搜索框自动补全智能提示效果
- 仿百度的智能提示功能
- JQUERY仿百度谷歌智能提示
- ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件 .
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 输入框提示信息
- 输入框智能提示(一)
- 输入框智能提示(二)
- ajax(2)实现智能输入提示(类似百度搜索框智能输入)
- RecyclerView 的监听方式
- C++作业3
- Spring+mybaits+springmvc练习
- c++实验3—多分数段函数求值
- 摘自w3school的html标签内容——框架标签
- bootstrap仿百度输入框智能提示(提示信息存在于数据库中)
- Linux shell I/O 重定向
- algorithm(set)
- MySql修改数据库编码为UTF8
- IIS7.5 HTTP 错误 500.19
- 分别求1+2+3+.....+n 和 1*2*3*......*n递归
- Docker的数据卷和数据卷容器
- Django-HttpResponse返回models对象
- FastDFS在.Net平台上的使用