1、项目中有需要会需要用到输入框自动补全功能,类似于企业名,药店名称等等。jqueryui autocomplete就可以实现这个功能。
jquery ui AutoComplete 官网地址:http://jqueryui.com/autocomplete/
效果如下图所示:
下面来使用 autocomplete插件来实现类似效果。
代码如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("http://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$( function() {
$("#companyid").autocomplete({
minLength: 5, //满足搜索的最小长度
source: function( request, response ) {
$.ajax({
url: "/onWay/getCompanyName",
type : "post",
dataType : "json",
data: {
companynm : $("#companyid").val()
},
success: function( data ) {
response( $.map( data.company, function( item ) {
return {
label: item.companynm,
value: item.id
}
}));
}
});
},
select: function( event, ui ) {
//设置输入框值
$("#companyid").val( ui.item.label );
//设置id值
$("#company_id").val(ui.item.value);
return false;
}
});
} );
</script>
</head>
<body>
<input type="text" id="companyid" name="companyid" value="" filterType="="></input>
<input type="hidden" id="company_id" >
</body>
</html>