bootstrap仿百度输入框智能提示（提示信息存在于数据库中）

示例图片：

百度示例

所实现示例

jsp：

缴费单位名称*

name="companyName" οnclick="autosearchCargono()" class="col-xs-12 col-sm-9" placeholder="必填,50字以内" />

缴费单位代码*

缴费金额*

缴费时间*

                                 " class="form-control datetimepicker"/>
                                 
                             

                       

备注*

${list.note}

保存

重置

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 getValue(String companyName) {
 return dbcCompanyBalanceMapper.getValue(companyName);
}

dao层：

List getValue(@Param("companyName")String companyName);

mapper.xml配置文件sql：

 
select id, company_id,company_name
from dbc_company_balance
where 1=1 
 
 and company_name like concat ('%',#{companyName},'%')
  
limit 0,10