├── .editorconfig ├── .gitignore ├── LICENSE.md ├── README.md ├── bower.json ├── examples ├── index.html ├── initialize.js ├── input-group.html └── simple.html ├── package.json ├── screenshot.png ├── typeaheadjs.css └── typeaheadjs.less /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # 2 space indentation 12 | [*] 13 | indent_style = space 14 | indent_size = 2 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | 6 | # Numerous always-ignore extensions 7 | *.diff 8 | *.err 9 | *.log 10 | *.orig 11 | *.rej 12 | *.swo 13 | *.swp 14 | *.vi 15 | *.zip 16 | *~ 17 | 18 | # OS or Editor folders 19 | ._* 20 | .cache 21 | .DS_Store 22 | .idea 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | *.sublime-project 28 | *.sublime-workspace 29 | nbproject 30 | Thumbs.db 31 | 32 | # Komodo 33 | .komodotools 34 | *.komodoproject 35 | 36 | # grunt-html-validation 37 | validation-report.json 38 | validation-status.json 39 | 40 | # Folders to ignore 41 | bower_components 42 | node_modules 43 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Bass Jobsen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Typeahead.js and Bootstrap 3 2 | ============================ 3 | 4 | For Bootstrap 4 try [typeaheadjs.css](https://github.com/bassjobsen/typeahead.js-bootstrap4-css/) 5 | 6 | typeahead.js 7 | ------------ 8 | The [typeahead.js](https://github.com/twitter/typeahead.js) library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provided a rich typeahead experience. 9 | 10 | Bootstrap 3 11 | ----------- 12 | Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community. 13 | 14 | To get started, check out ! 15 | 16 | History 17 | ------- 18 | With Twitter Bootstrap 3 the typeahead plugin had been dropped. [@mdo](http://twitter.com/mdo) says: "in favor of folks using [Twitter's typeahead](https://github.com/twitter/typeahead.js). Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by `typeahead.js` differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the `typeahead.js` dropdown menu to fit the default Bootstrap theme. You can download the basic CSS here, or use the LESS file to integrate it into your project. CSS and LESS are build with the latest LESS code of Bootstrap 3.1.0. Code does not introduce new mixins and only extends Bootstrap's LESS. If you search for a more extended version try: [typeahead.js-bootstrap3.less](https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.less). 19 | 20 | Note also the [orginal typeahead plugin](https://github.com/bassjobsen/Bootstrap-3-Typeahead) still works with Bootstrap 3. 21 | 22 | Download 23 | ======== 24 | 25 | - Download the latest [typeaheadjs.css](https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css) or [typeaheadjs.less](https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.less). 26 | 27 | How to use 28 | ========== 29 | 30 | CSS 31 | --- 32 | Include the CSS file after Bootstrap's CSS in your HTML: 33 | 34 | 35 | 36 | 37 | LESS 38 | ---- 39 | 1. Copy typeaheadjs.less into your Bootstrap's LESS folder 40 | 2. Import this file into bootstrap.less: `@import "typeaheadjs.less";` 41 | 3. Recompile Bootstrap 42 | 43 | Example 44 | ------- 45 | ![ScreenShot](https://raw.github.com/bassjobsen/typeahead.js-bootstrap-css/master/screenshot.png) 46 | 47 | Examples 48 | -------- 49 | Run `npm install`. Now the .html files can be opened standalone. Thanks to @holtkamp. 50 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typeahead.js-bootstrap3.less", 3 | "version": "1.2.1", 4 | "main": [ 5 | "typeaheadjs.css", 6 | "typeaheadjs.less" 7 | ], 8 | "dependencies": { 9 | "bootstrap": "~3.3", 10 | "typeahead.js": "~0.11" 11 | }, 12 | "ignore":[ 13 | ".gitignore", 14 | ".gitmodules", 15 | ".travis.yml", 16 | "package.json" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |
  1. Simple examples
    2. 6 |
  2. InputGroup examples
    3. 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/initialize.js: -------------------------------------------------------------------------------- 1 | var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 2 | 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 3 | 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 4 | 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 5 | 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 6 | 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 7 | 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 8 | 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 9 | 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 10 | ]; 11 | 12 | var substringMatcher = function (strings) { 13 | return function findMatches(query, callback) { 14 | var matches; 15 | 16 | // an array that will be populated with substring matches 17 | matches = []; 18 | 19 | // regex used to determine if a string contains the substring `q` 20 | substrRegex = new RegExp(query, 'i'); 21 | 22 | // iterate through the pool of strings and for any string that 23 | // contains the substring `q`, add it to the `matches` array 24 | $.each(strings, function (i, str) { 25 | if (substrRegex.test(str)) { 26 | matches.push(str); 27 | } 28 | }); 29 | 30 | callback(matches); 31 | }; 32 | }; 33 | 34 | 35 | var options = {}; 36 | var dataSet = { 37 | source: substringMatcher(states) 38 | }; 39 | 40 | $('.typeahead').typeahead(options, dataSet); 41 | 42 | $('button.remove').click( 43 | function () { 44 | $('.typeahead').typeahead('val', '').trigger('typeahead:idle'); 45 | } 46 | ); -------------------------------------------------------------------------------- /examples/input-group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

input-group input-group-addon

14 |
15 | 16 | 17 | 18 | 19 |
20 | 21 |

input-group-sm input-group-addon

22 |
23 | 24 | 25 | 26 | 27 |
28 | 29 |

input-group-lg input-group-addon

30 |
31 | 32 | 33 | 34 | 35 |
36 | 37 |

input-group input-group-button

38 |
39 | 40 | 43 | 44 | 45 |
46 | 47 |

input-group-sm input-group-button

48 |
49 | 50 | 53 | 54 | 55 |
56 | 57 |

input-group-lg input-group-button

58 |
59 | 60 | 63 | 64 | 65 |
66 | 67 |

input-group input-group-buttons

68 |
69 | 70 | 73 | 76 | 77 | 78 |
79 | 80 |

input-group-sm input-group-buttons

81 |
82 | 83 | 86 | 89 | 90 | 91 |
92 | 93 |

input-group-lg input-group-buttons

94 |
95 | 96 | 99 | 102 | 103 | 104 |
105 | 106 |

input-group input-group-addon input-group-button

107 |
108 | 109 | 110 | 111 | 112 | 113 | 116 | 117 |
118 | 119 |

input-group-sm input-group-addon input-group-button

120 |
121 | 122 | 123 | 124 | 125 | 126 | 129 | 130 |
131 | 132 |

input-group-lg input-group-addon input-group-button

133 |
134 | 135 | 136 | 137 | 138 | 139 | 142 | 143 |
144 |
145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

simple

14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typeahead.js-bootstrap-css", 3 | "description": "Bootstrap3 style for typeahead.js using Bootstrap 3 mixins and variables", 4 | "version": "1.2.1", 5 | "keywords": [ 6 | "less", 7 | "bootstrap", 8 | "typeahead.js" 9 | ], 10 | "homepage": "https://github.com/bassjobsen/typeahead.js-bootstrap-css/", 11 | "author": "Bass Jobsen", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/bassjobsen/typeahead.js-bootstrap-css/" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/bassjobsen/typeahead.js-bootstrap-css/issues" 18 | }, 19 | "devDependencies": { 20 | "bootstrap": "~3.3", 21 | "typeahead.js": "~0.11" 22 | }, 23 | "licenses": [ 24 | { 25 | "type": "MIT", 26 | "url": "http://www.opensource.org/licenses/MIT" 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bassjobsen/typeahead.js-bootstrap-css/3ee83164d82bd15168059a6ebb00648182fed466/screenshot.png -------------------------------------------------------------------------------- /typeaheadjs.css: -------------------------------------------------------------------------------- 1 | span.twitter-typeahead .tt-menu, 2 | span.twitter-typeahead .tt-dropdown-menu { 3 | cursor: pointer; 4 | position: absolute; 5 | top: 100%; 6 | left: 0; 7 | z-index: 1000; 8 | display: none; 9 | float: left; 10 | min-width: 160px; 11 | padding: 5px 0; 12 | margin: 2px 0 0; 13 | list-style: none; 14 | font-size: 14px; 15 | text-align: left; 16 | background-color: #ffffff; 17 | border: 1px solid #cccccc; 18 | border: 1px solid rgba(0, 0, 0, 0.15); 19 | border-radius: 4px; 20 | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 21 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 22 | background-clip: padding-box; 23 | } 24 | span.twitter-typeahead .tt-suggestion { 25 | display: block; 26 | padding: 3px 20px; 27 | clear: both; 28 | font-weight: normal; 29 | line-height: 1.42857143; 30 | color: #333333; 31 | white-space: nowrap; 32 | } 33 | span.twitter-typeahead .tt-suggestion.tt-cursor, 34 | span.twitter-typeahead .tt-suggestion:hover, 35 | span.twitter-typeahead .tt-suggestion:focus { 36 | color: #ffffff; 37 | text-decoration: none; 38 | outline: 0; 39 | background-color: #337ab7; 40 | } 41 | .input-group.input-group-lg span.twitter-typeahead .form-control { 42 | height: 46px; 43 | padding: 10px 16px; 44 | font-size: 18px; 45 | line-height: 1.3333333; 46 | border-radius: 6px; 47 | } 48 | .input-group.input-group-sm span.twitter-typeahead .form-control { 49 | height: 30px; 50 | padding: 5px 10px; 51 | font-size: 12px; 52 | line-height: 1.5; 53 | border-radius: 3px; 54 | } 55 | span.twitter-typeahead { 56 | width: 100%; 57 | } 58 | .input-group span.twitter-typeahead { 59 | display: block !important; 60 | height: 34px; 61 | } 62 | .input-group span.twitter-typeahead .tt-menu, 63 | .input-group span.twitter-typeahead .tt-dropdown-menu { 64 | top: 32px !important; 65 | } 66 | .input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control { 67 | border-radius: 0; 68 | } 69 | .input-group span.twitter-typeahead:first-child .form-control { 70 | border-top-left-radius: 4px; 71 | border-bottom-left-radius: 4px; 72 | border-top-right-radius: 0; 73 | border-bottom-right-radius: 0; 74 | } 75 | .input-group span.twitter-typeahead:last-child .form-control { 76 | border-top-left-radius: 0; 77 | border-bottom-left-radius: 0; 78 | border-top-right-radius: 4px; 79 | border-bottom-right-radius: 4px; 80 | } 81 | .input-group.input-group-sm span.twitter-typeahead { 82 | height: 30px; 83 | } 84 | .input-group.input-group-sm span.twitter-typeahead .tt-menu, 85 | .input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu { 86 | top: 30px !important; 87 | } 88 | .input-group.input-group-lg span.twitter-typeahead { 89 | height: 46px; 90 | } 91 | .input-group.input-group-lg span.twitter-typeahead .tt-menu, 92 | .input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu { 93 | top: 46px !important; 94 | } 95 | -------------------------------------------------------------------------------- /typeaheadjs.less: -------------------------------------------------------------------------------- 1 | span.twitter-typeahead { 2 | width: 100%; 3 | 4 | .tt-menu, 5 | .tt-dropdown-menu 6 | { 7 | cursor: pointer; 8 | &:extend(.dropdown-menu); 9 | } 10 | 11 | .tt-suggestion { 12 | &:extend(.dropdown-menu > li > a); 13 | &.tt-cursor, 14 | &:hover, 15 | &:focus { 16 | &:extend(.dropdown-menu > .active > a); 17 | } 18 | } 19 | 20 | .input-group & { 21 | display: block !important; 22 | height: @input-height-base; 23 | .tt-menu, 24 | .tt-dropdown-menu { 25 | top:32px !important; 26 | } 27 | &:not(:first-child):not(:last-child) { 28 | .form-control { 29 | border-radius: 0; 30 | } 31 | } 32 | &:first-child { 33 | .form-control { 34 | border-top-left-radius: @input-border-radius; 35 | border-bottom-left-radius: @input-border-radius; 36 | border-top-right-radius: 0; 37 | border-bottom-right-radius: 0; 38 | } 39 | } 40 | &:last-child { 41 | .form-control { 42 | border-top-left-radius: 0; 43 | border-bottom-left-radius: 0; 44 | border-top-right-radius: @input-border-radius; 45 | border-bottom-right-radius: @input-border-radius; 46 | } 47 | } 48 | 49 | } 50 | .input-group.input-group-sm & { 51 | height: @input-height-small; 52 | .tt-menu, 53 | .tt-dropdown-menu { 54 | top:@input-height-small !important; 55 | } 56 | .form-control { 57 | &:extend(.input-group-sm > .form-control); 58 | } 59 | } 60 | .input-group.input-group-lg & { 61 | height: @input-height-large; 62 | .tt-menu, 63 | .tt-dropdown-menu { 64 | top:@input-height-large !important; 65 | } 66 | .form-control { 67 | &:extend(.input-group-lg > .form-control); 68 | } 69 | } 70 | } 71 | --------------------------------------------------------------------------------