git ssb

0+

k4ml / belajar-js



Commit c39c8cda8192a082b28a2a85c68544a9238f988a

Browse Files

initial typeahead

Kamal Mustafa committed on 3/18/2015, 7:39:24 AM

Files changed

javascripts/app.jsadded
typeahead-bare.htmladded
typeahead.htmladded
javascripts/app.jsView
@@ -1,0 +1,69 @@
1+var substringMatcher = function(strs) {
2+ return function findMatches(q, cb) {
3+ var matches, substrRegex;
4+
5+ // an array that will be populated with substring matches
6+ matches = [];
7+
8+ // regex used to determine if a string contains the substring `q`
9+ substrRegex = new RegExp(q, 'i');
10+
11+ // iterate through the pool of strings and for any string that
12+ // contains the substring `q`, add it to the `matches` array
13+ $.each(strs, function(i, str) {
14+ if (substrRegex.test(str)) {
15+ // the typeahead jQuery plugin expects suggestions to a
16+ // JavaScript object, refer to typeahead docs for more info
17+ matches.push({ value: str });
18+ }
19+ });
20+
21+ cb(matches);
22+ };
23+};
24+
25+var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
26+ 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
27+ 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
28+ 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
29+ 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
30+ 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
31+ 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
32+ 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
33+ 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
34+];
35+
36+$('#the-basics .typeahead').typeahead({
37+ hint: true,
38+ highlight: true,
39+ minLength: 1
40+},
41+{
42+ name: 'states',
43+ displayKey: 'value',
44+ source: substringMatcher(states)
45+});
46+
47+// constructs the suggestion engine
48+var states = new Bloodhound({
49+ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
50+ queryTokenizer: Bloodhound.tokenizers.whitespace,
51+ // `states` is an array of state names defined in "The Basics"
52+ local: $.map(states, function(state) { return { value: state }; })
53+});
54+
55+// kicks off the loading/processing of `local` and `prefetch`
56+states.initialize();
57+
58+$('#bloodhound .typeahead').typeahead({
59+ hint: true,
60+ highlight: true,
61+ minLength: 1
62+},
63+{
64+ name: 'states',
65+ displayKey: 'value',
66+ // `ttAdapter` wraps the suggestion engine in an adapter that
67+ // is compatible with the typeahead jQuery plugin
68+ source: states.ttAdapter()
69+});
typeahead-bare.htmlView
@@ -1,0 +1,28 @@
1+<script src="javascripts/jquery.min.js"></script>
2+
3+<script src="javascripts/ta/common/utils.js"></script>
4+
5+<script src="javascripts/ta/typeahead/html.js"></script>
6+<script src="javascripts/ta/typeahead/css.js"></script>
7+<script src="javascripts/ta/typeahead/event_emitter.js"></script>
8+<script src="javascripts/ta/typeahead/highlight.js"></script>
9+<script src="javascripts/ta/typeahead/dataset.js"></script>
10+<script src="javascripts/ta/typeahead/dropdown.js"></script>
11+<script src="javascripts/ta/typeahead/input.js"></script>
12+<script src="javascripts/ta/typeahead/typeahead.js"></script>
13+<script src="javascripts/ta/typeahead/event_bus.js"></script>
14+<script src="javascripts/ta/typeahead/plugin.js"></script>
15+
16+<script src="javascripts/ta/bloodhound/tokenizers.js"></script>
17+<script src="javascripts/ta/bloodhound/options_parser.js"></script>
18+<script src="javascripts/ta/bloodhound/search_index.js"></script>
19+<script src="javascripts/ta/bloodhound/bloodhound.js"></script>
20+<h2>The Basics</h2>
21+<div id="the-basics">
22+ <input class="typeahead" type="text" placeholder="States of USA">
23+</div>
24+<h2>Using Bloodhound</h2>
25+<div id="bloodhound">
26+ <input class="typeahead" type="text" placeholder="States of USA">
27+</div>
28+<script src="javascripts/app.js"></script>
typeahead.htmlView
@@ -1,0 +1,11 @@
1+<script src="javascripts/jquery.min.js"></script>
2+<script src="javascripts/typeahead.bundle.js"></script>
3+<h2>The Basics</h2>
4+<div id="the-basics">
5+ <input class="typeahead" type="text" placeholder="States of USA">
6+</div>
7+<h2>Using Bloodhound</h2>
8+<div id="bloodhound">
9+ <input class="typeahead" type="text" placeholder="States of USA">
10+</div>
11+<script src="javascripts/app.js"></script>

Built with git-ssb-web