"TEST typeahead.js with JSON"
Bootstrap 3.1.0 Snippet by mrmccormack

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
27
28
29
30
31
32
33
34
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<!-- this will center a col 6, and 3 on each side -->
<div class="col-md-6 col-md-offset-3">
<img src="https://cdn1.iconfinder.com/data/icons/IS_CMS/128/publish.png" class="pull-right" alt="">
<h2>
TEST typeahead.js with JSON
</h2>
TB 3, removed the old typeahead, and this is how you can do it in 3. Seems very tricky.
<hr>
<input type="text" class="typeahead form-control" placeholder="Location">
<hr>
<input type="text" class="fake-hidden form-control" placeholder="fake hidden" disabled>
</div><!-- ./col-md6 -->
</div><!-- ./row -->
</div><!-- ./containter -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
.tt-hint {
display: none
}
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
$(window).load(function(){
$(function () {
$('.typeahead').typeahead({
name: 'Location',
local: [{
value: 'Bangkok',
tokens: ['Bang', 'Cock'],
id: 2
}, {
value: 'Kuala Lumpur',
tokens: ['Kuala', 'Lumpur', 'la'],
id: 3
},
{
value: 'Canada',
tokens: ['Kanada', 'Can', 'la'],
id: 3
}
]
});
$('.typeahead').on('typeahead:selected', function (e, datum) {
$('.fake-hidden').val(datum.id);
});
});
});
// This doesn't seem to work with new version
/*!
* typeahead.js 0.9.3
* https://github.com/twitter/typeahead
* Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page

Questions / Comments: