Using the bootstrap Typeahead component:
The Typeahead component in Bootstrap is the auto-complete AutoComplete that is usually said to be automatically populated.
Effect:
Implementation method:
1, the introduction of bootstrap related Js:
<link href= "${pagecontext.request.contextpath}/static/bootstrap-3.3.4-dist/css/bootstrap.css" rel= "stylesheet ">
<script src= "${pagecontext.request.contextpath}/static/bootstrap-3.3.4-dist/js/bootstrap.min.js" ></ Script>
2. Introduction of Typeahead Components:
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/static/jquery_autocomplete/ Bootstrap-typeahead.js"></script>
3. HTML:
<input type= "text" class= "Form-control" id= "Select_company" data-provide= "typeahead" Data-items= "4" placeholder= "Please enter Enterprise Name" >
4, JS
var enterprise = [];
$.ajax ({
URL: ' ${pagecontext.request.contextpath}/dailycheck/getallcompany ',
Type: ' POST ',
DataType: ' JSON ',
Success:function (data) {
for (var i = 0; i < data.length; i++) {
Enterprise[i] = Data[i].companyname;
}
}
});
$ ("#companyName"). Typeahead ({
Source:enterprise
});
Bootstrap Typeahead Auto-complete