├── .jshintignore ├── .gitignore ├── example ├── fruits │ ├── apple.png │ ├── banana.png │ ├── lemon.png │ └── orange.png ├── example.css └── example.js ├── .editorconfig ├── .jshintrc ├── dist ├── horsey.min.css ├── horsey.css └── horsey.min.js ├── horsey.styl ├── license ├── package.json ├── changelog.markdown ├── index.html ├── readme.markdown ├── horsey.js └── horsey.es5.js /.jshintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | example 4 | *.es5.js 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | Thumbs.db 5 | -------------------------------------------------------------------------------- /example/fruits/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bevacqua/horsey/HEAD/example/fruits/apple.png -------------------------------------------------------------------------------- /example/fruits/banana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bevacqua/horsey/HEAD/example/fruits/banana.png -------------------------------------------------------------------------------- /example/fruits/lemon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bevacqua/horsey/HEAD/example/fruits/lemon.png -------------------------------------------------------------------------------- /example/fruits/orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bevacqua/horsey/HEAD/example/fruits/orange.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "newcap": true, 5 | "noarg": true, 6 | "noempty": true, 7 | "nonew": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": false, 11 | "trailing": true, 12 | "boss": true, 13 | "eqnull": true, 14 | "strict": true, 15 | "immed": true, 16 | "expr": true, 17 | "latedef": "nofunc", 18 | "quotmark": "single", 19 | "validthis": true, 20 | "indent": 2, 21 | "node": true, 22 | "browser": true, 23 | "esnext": true 24 | } 25 | -------------------------------------------------------------------------------- /dist/horsey.min.css: -------------------------------------------------------------------------------- 1 | .sey-container{display:none;position:absolute;box-shadow:1px 2px 6px;background-color:#fff;color:#333;transition:left .1s ease-in-out;z-index:1}.sey-list{padding:0;margin:0;list-style-type:none}.sey-show{display:block}.sey-hide{display:none}.sey-empty{cursor:default;padding:7px}.sey-item{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:7px}.sey-item:hover{background-color:#444;color:#fff}.sey-selected{background-color:#333;color:#fff}.sey-char-highlight{font-weight:700}.sey-category-id{background-color:#eee;color:#aaa;text-align:right;text-transform:capitalize;font-style:italic;font-size:12px;box-shadow:1px 0 1px;padding:7px} -------------------------------------------------------------------------------- /horsey.styl: -------------------------------------------------------------------------------- 1 | .sey-container 2 | display none 3 | position absolute 4 | box-shadow 1px 2px 6px 5 | background-color #fff 6 | color #333 7 | transition left 0.1s ease-in-out 8 | z-index 1 9 | 10 | .sey-list 11 | padding 0 12 | margin 0 13 | list-style-type none 14 | 15 | .sey-show 16 | display block 17 | 18 | .sey-hide 19 | display none 20 | 21 | .sey-empty 22 | cursor default 23 | padding 7px 24 | 25 | .sey-item 26 | cursor pointer 27 | overflow hidden 28 | white-space nowrap 29 | text-overflow ellipsis 30 | padding 7px 31 | 32 | &:hover 33 | background-color #444 34 | color #fff 35 | 36 | .sey-selected 37 | background-color #333 38 | color #fff 39 | 40 | .sey-char-highlight 41 | font-weight bold 42 | 43 | .sey-category-id 44 | background-color #eee 45 | color #aaa 46 | text-align right 47 | text-transform capitalize 48 | font-style italic 49 | font-size 12px 50 | box-shadow 1px 0px 1px 51 | padding 7px 52 | -------------------------------------------------------------------------------- /dist/horsey.css: -------------------------------------------------------------------------------- 1 | .sey-container { 2 | display: none; 3 | position: absolute; 4 | box-shadow: 1px 2px 6px; 5 | background-color: #fff; 6 | color: #333; 7 | transition: left 0.1s ease-in-out; 8 | z-index: 1; 9 | } 10 | .sey-list { 11 | padding: 0; 12 | margin: 0; 13 | list-style-type: none; 14 | } 15 | .sey-show { 16 | display: block; 17 | } 18 | .sey-hide { 19 | display: none; 20 | } 21 | .sey-empty { 22 | cursor: default; 23 | padding: 7px; 24 | } 25 | .sey-item { 26 | cursor: pointer; 27 | overflow: hidden; 28 | white-space: nowrap; 29 | text-overflow: ellipsis; 30 | padding: 7px; 31 | } 32 | .sey-item:hover { 33 | background-color: #444; 34 | color: #fff; 35 | } 36 | .sey-selected { 37 | background-color: #333; 38 | color: #fff; 39 | } 40 | .sey-char-highlight { 41 | font-weight: bold; 42 | } 43 | .sey-category-id { 44 | background-color: #eee; 45 | color: #aaa; 46 | text-align: right; 47 | text-transform: capitalize; 48 | font-style: italic; 49 | font-size: 12px; 50 | box-shadow: 1px 0px 1px; 51 | padding: 7px; 52 | } 53 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2015 Nicolas Bevacqua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "horsey", 3 | "version": "4.2.2", 4 | "description": "Progressive and customizable autocomplete component", 5 | "main": "horsey.es5.js", 6 | "scripts": { 7 | "build": "npm run scripts && npm run styles", 8 | "deploy": "npm run build && npm run deployment && npm run sync", 9 | "deployment": "git add dist ; git add horsey.es5.js ; npm version ${BUMP:-\"patch\"} ; git add package.json ; git commit -am \"Release $(cat package.json | jq -r .version)\" ; git push --tags ; npm publish ; git push", 10 | "scripts": "jshint . && babel --presets es2015 --out-file horsey.es5.js horsey.js && browserify -s horsey -t [ babelify --presets [ es2015 ] ] -do dist/horsey.js horsey.js && uglifyjs -m -c -o dist/horsey.min.js dist/horsey.js", 11 | "start": "watchify -vs horsey -t [ babelify --presets [ es2015 ] ] -do dist/horsey.js horsey.js & stylus -w horsey.styl -o dist", 12 | "styles": "stylus horsey.styl -o dist && cleancss dist/horsey.css -o dist/horsey.min.css", 13 | "sync": "git checkout gh-pages ; git merge master ; git push ; git checkout master" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/bevacqua/horsey.git" 18 | }, 19 | "author": "Nicolas Bevacqua (http://bevacqua.io/)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/bevacqua/horsey/issues" 23 | }, 24 | "homepage": "https://github.com/bevacqua/horsey", 25 | "dependencies": { 26 | "bullseye": "1.5.0", 27 | "contra": "1.9.4", 28 | "crossvent": "1.5.4", 29 | "fuzzysearch": "1.0.3", 30 | "hash-sum": "1.0.2", 31 | "lodash": "4.13.1", 32 | "sektor": "1.1.4", 33 | "sell": "1.0.0" 34 | }, 35 | "devDependencies": { 36 | "babel-cli": "6.10.1", 37 | "babel-preset-es2015": "6.9.0", 38 | "babelify": "7.3.0", 39 | "browserify": "13.0.1", 40 | "clean-css": "3.0.4", 41 | "jshint": "2.9.2", 42 | "nib": "1.0.4", 43 | "stylus": "0.49.3", 44 | "uglify-js": "2.4.16", 45 | "watchify": "2.2.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /example/example.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #14204f; 3 | margin: 0 auto; 4 | max-width: 760px; 5 | } 6 | 7 | html, body { 8 | -webkit-box-sizing: border-box; 9 | -moz-box-sizing: border-box; 10 | box-sizing: border-box; 11 | } 12 | 13 | *, *:before, *:after { 14 | -webkit-box-sizing: inherit; 15 | -moz-box-sizing: inherit; 16 | box-sizing: inherit; 17 | } 18 | 19 | body, input, button, textarea { 20 | font-family: Georgia, Helvetica; 21 | font-size: 17px; 22 | color: #ecf0f1; 23 | } 24 | 25 | textarea { 26 | border: none; 27 | padding: 10px; 28 | width: 100%; 29 | background-color: #14204f; 30 | min-height: 400px; 31 | } 32 | 33 | h1 { 34 | margin-top: 20px; 35 | text-align: center; 36 | } 37 | 38 | h3 { 39 | background-color: rgba(255, 255, 255, 0.2); 40 | padding: 20px; 41 | text-align: center; 42 | } 43 | 44 | a, 45 | a:hover { 46 | color: #ecf0f1; 47 | } 48 | 49 | pre code { 50 | color: #fff; 51 | font-size: 18px; 52 | } 53 | 54 | pre { 55 | overflow-x: auto; 56 | } 57 | 58 | label { 59 | display: block; 60 | margin-bottom: 15px; 61 | } 62 | 63 | sub { 64 | display: block; 65 | margin-top: -10px; 66 | margin-bottom: 15px; 67 | font-size: 11px; 68 | font-style: italic; 69 | } 70 | 71 | ul { 72 | margin: 0; 73 | padding: 0; 74 | } 75 | 76 | .parent { 77 | background-color: rgba(255, 255, 255, 0.2); 78 | margin: 50px 0; 79 | padding: 20px; 80 | } 81 | 82 | input { 83 | border: none; 84 | outline: none; 85 | background-color: #ecf0f1; 86 | padding: 10px; 87 | color: #14204f; 88 | border: 0; 89 | margin: 5px 0; 90 | display: block; 91 | width: 100%; 92 | } 93 | 94 | button { 95 | background-color: #ecf0f1; 96 | color: #14204f; 97 | border: 0; 98 | padding: 18px 12px; 99 | margin-left: 6px; 100 | cursor: pointer; 101 | outline: none; 102 | } 103 | 104 | button:hover { 105 | background-color: #e74c3c; 106 | color: #ecf0f1; 107 | } 108 | 109 | .nsg-tag { 110 | border-color: #14204f; 111 | } 112 | 113 | .inline { 114 | display: inline-block; 115 | } 116 | 117 | .gh-fork { 118 | position: fixed; 119 | top: 0; 120 | right: 0; 121 | border: 0; 122 | } 123 | 124 | .autofruit { 125 | width: 16px; 126 | margin-right: 3px; 127 | } 128 | 129 | #ddl { 130 | cursor: pointer; 131 | padding: 10px; 132 | background-color: rgba(0,0,0,0.1); 133 | } 134 | -------------------------------------------------------------------------------- /changelog.markdown: -------------------------------------------------------------------------------- 1 | # 4.2.1 Vampire 2 | 3 | - Completely revamped, see API documentation 4 | 5 | # 3.0.0 Live from Liverpool 6 | 7 | - Introduced live suggestions 8 | - Introduced fixes for Internet Explorer 9 | 10 | # 2.6.1 Bullying 11 | 12 | - Updated `bullseye@1.4.6` 13 | 14 | # 2.6.0 Emancipation 15 | 16 | - Decoupled `horsey` from `woofmark`, extracted bridge into `banksy` module 17 | 18 | # 2.5.4 Polypony 19 | 20 | - Use latest `bullseye`, which uses `getSeleccion` polyfill 21 | 22 | # 2.5.3 Area 51 23 | 24 | - Handle retargetting for `woofmark` editors 25 | 26 | # 2.5.2 Insensitive Animal 27 | 28 | - Case insensitive fuzzy searching 29 | - Fixed a bug where non-string suggestions would be displayed as `undefined` 30 | 31 | # 2.5.1 Toggle Bobble 32 | 33 | - Exposed `toggle` method to toggle visibility of horsey autocomplete suggestion list 34 | 35 | # 2.5.0 Woof woof 36 | 37 | - Example on how to use in a ` 105 | 
106 |       
107 | horsey(document.querySelector('textarea'), {
108 |   source: [{ list: [
109 |     { value: '@michael', text: 'Michael Jackson' },
110 |     { value: '@jack', text: 'Jack Johnson' },
111 |     { value: '@ozzy', text: 'Ozzy Osbourne' }
112 |   ]}],
113 |   getText: 'text',
114 |   getValue: 'value',
115 |   anchor: '@'
116 | });
117 |       
118 |
119 | 120 |
121 | 122 |
Click here to set fruity treat type
123 | 
124 |       
125 | horsey(document.querySelector('div'), {
126 |   source: [{ list: [
127 |     { value: 'banana', text: 'Bananas from Amazon Rainforest' },
128 |     { value: 'banana-boat', text: 'Banana Boat' },
129 |     { value: 'apple', text: 'Red apples from New Zealand' },
130 |     { value: 'apple-cider', text: 'Red apple cider beer' },
131 |     { value: 'orange', text: 'Oranges from Moscow' },
132 |     { value: 'orange-vodka', text: 'Classic orange vodka cocktail' },
133 |     { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
134 |   ]}],
135 |   getText: 'text',
136 |   getValue: 'value'
137 | });
138 |       
139 |
140 |
141 | 142 |

Get it on GitHub! bevacqua/horsey

143 | 144 | 145 | -------------------------------------------------------------------------------- /readme.markdown: -------------------------------------------------------------------------------- 1 | # Horsey 2 | 3 | > Progressive and customizable autocomplete component 4 | 5 | Browser support includes every sane browser and **IE7+**. 6 | 7 | # Demo! 8 | 9 | You can see a [live demo here][3]. 10 | 11 | [![screenshot.png][5]][3] 12 | 13 | # Inspiration 14 | 15 | I needed a fast, easy to use, and reliable autocomplete library. The ones I stumbled upon were too bloated, too opinionated, or provided an unfriendly human experience. 16 | 17 | The goal is to produce a framework-agnostic autocomplete that is easily integrated into your favorite MVC framework, that doesn't translate into a significant addition to your codebase, and that's **enjoyable to work with**. Horsey shares the modular design philosophy of [Rome, the datetime picker][1]. Furthermore, it plays well with [Insignia, the tag editor][2] component, and pretty much any other well-delimited component out there. 18 | 19 | # Features 20 | 21 | - Small and focused 22 | - Natural keyboard navigation 23 | - Progressively enhanced 24 | - Extensive browser support 25 | - Fuzzy searching 26 | - Supports `` and `