Bootstrap Snippet Bootstrap 4 algolia instant search location autocomplete input using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdn.jsdelivr.net/npm/places.js@1.16.4"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <!--To use the full functionality visit https://www.algolia.com-->
            <h6 class="text-center">Type your location(New york, London, Delhi, Tokyo)</h6> <input type="search" id="address" class="form-control" placeholder="Where are we going?" />
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
.container {
    margin-top: 100px
}
body {
    background-color: #E0E0E0
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
(function() {
var placesAutocomplete = places({
appId: 'plEHFE8OXN3L',
apiKey: 'a6eb12d44e181f3c3c3d02bd7cf7b2fd',
container: document.querySelector('#address')
});
var $address = document.querySelector('#address-value')
placesAutocomplete.on('change', function(e) {
$address.textContent = e.suggestion.value
});
placesAutocomplete.on('clear', function() {
$address.textContent = 'none';
});
})();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 algolia instant search location autocomplete input"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap 4 algolia instant search location autocomplete input" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap 4 algolia instant search location autocomplete input"
Bootstrap 4.1.1 Snippet by tieusuquay79