"WIP - Bootstrap material design + Bootstrap 4 + Typeahead"
Bootstrap 4.0.0 Snippet by djibe89

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>WIP</h2>
<form>
<div class="col-sm-8">
<div class="md-form" id="the-basics">
<i class="fa fa-asterisk prefix"></i>
<input type="text" class="form-control typeahead" id="medicament" autocomplete="off">
<label for="medicament" id="medicament-label">Médicament (DCI, nom) ...</label>
</div>
<div class="col-sm-4">
<div class="md-form">
<button type="submit" class="btn btn-primary btn-circle btn-lg"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/font/roboto/Roboto-Regular.woff2);
.dropdown-menu, span.twitter-typeahead .tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 1rem;
color: #373a3c;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
/*each line of result*/
span.twitter-typeahead .tt-suggestion {
display: block;
width: 100%;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.5;
color: #373a3c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
// MDB + bootstrap + typeahead label fix
$('#medicament').on('focus',function(){
$('#medicament-label').addClass("active").siblings().addClass("active");
//$("#medicament-label").siblings().addClass("active");
}).on('blur',function(){
//if ($(this).val().length > 0){
if (!!$(this).val()){
}else{
$('#medicament-label').removeClass("active").siblings().removeClass("active");
}
});
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
//bloodhound demo
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit Angular
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: