├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── v-suggest.js └── v-suggest.js.map ├── package.json ├── src ├── Suggest.js ├── index.js ├── mixins │ ├── data.js │ ├── methods.js │ └── render.js └── suggest.scss └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["stage-3","es2015"], 3 | "plugins": ["dynamic-import-node"] 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Terry Zeng 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 |

2 | 3 |

v-suggest

4 | 5 |
6 | 7 |

v-suggest

8 | 9 |

10 | A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick,
it make use experience like search engine input element 11 |

12 | 13 |

14 | 15 | 16 | 17 | 18 |

19 | 20 |




21 | 22 | ## Examples and Documentation 23 | 24 | Live example on [CodePen](https://codepen.io/terry05/pen/KKPQwxP), more examples and documentation please visit below sites 25 | 26 | - [English site](https://terryz.github.io/vue/#/suggest) 27 | - [国内站点](https://terryz.gitee.io/vue/#/suggest) 28 | 29 | ## Installation 30 | 31 | 32 | 33 | ``` 34 | npm i v-suggest -S 35 | ``` 36 | 37 | Include and install plugin in your `main.js` file 38 | 39 | ```js 40 | // Globally install plugin 41 | import Vue from 'vue' 42 | import Suggest from 'v-suggest' 43 | Vue.use(Suggest) 44 | 45 | // Import Suggest as a local component 46 | import { Suggest } from 'v-suggest' 47 | export default { 48 | components: { 49 | 'v-suggest': Suggest 50 | } 51 | } 52 | ``` 53 | 54 | ## Usage 55 | 56 | ```vue 57 | 64 | 65 | 79 | ``` 80 | -------------------------------------------------------------------------------- /dist/v-suggest.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vSuggest",[],e):"object"==typeof exports?exports.vSuggest=e():t.vSuggest=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="dist/",e(e.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Suggest=void 0;var o=n(1),i=function(t){return t&&t.__esModule?t:{default:t}}(o);e.Suggest=i.default,e.default={install:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object.keys(e).length&&"string"==typeof e.placeholder&&(i.default.props.placeholder.default=e.placeholder),t.component(i.default.name,i.default)}}},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),n(2);var i=n(7),r=o(i),s=n(9),a=o(s),l=n(10),u=o(l);e.default={name:"v-suggest",mixins:[r.default,a.default,u.default]}},function(t,e,n){var o=n(3);"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n(5)("61b43f65",o,!0,{})},function(t,e,n){e=t.exports=n(4)(!1),e.push([t.i,"div.v-suggest{position:relative}div.v-suggest input[type=text]{display:block;width:100%;padding:.4rem 1.8rem .4rem .7rem;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:none;box-shadow:none;text-overflow:ellipsis;will-change:border-color,box-shadow,background-color;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out,background-color .15s ease-in-out;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,background-color ease-in-out .15s;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color .15s ease-in-out;outline:0}div.v-suggest input[type=text]::-webkit-input-placeholder{color:#aaa}div.v-suggest input[type=text]:hover{background-color:#fafafa}div.v-suggest input[type=text]:focus{border:1px solid #999;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);background-color:#fff;color:#000}div.v-suggest input[type=text][disabled]{background-color:#eee;color:#666;cursor:not-allowed}div.v-suggest div.sg-clear{position:absolute;right:10px;top:0;cursor:pointer;height:100%;width:auto;line-height:1;padding:6px 0;font-size:21px;color:#999}div.v-suggest div.sg-clear span{display:inline-block}div.v-suggest div.sg-clear:hover{color:#000}ul.sg-results{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-width:250px;max-height:300px;overflow-y:auto;padding:5px 0;margin:0}ul.sg-results li.sg-results__row{height:auto!important;line-height:1.4;margin:0;overflow:hidden;padding:5px 10px;position:relative;text-align:left;white-space:normal;word-break:break-all;font-size:14px;color:#333;cursor:default}ul.sg-results li.sg-results__row.sg-over{background-color:#f6f8fa!important;color:#000!important;cursor:pointer}",""])},function(t,e){function n(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var r=o(i);return[n].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([r]).join("\n")}return[n].join("\n")}function o(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var o=n(e,t);return e[2]?"@media "+e[2]+"{"+o+"}":o}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;in.parts.length&&(o.parts.length=n.parts.length)}else{for(var s=[],i=0;i0&&void 0!==arguments[0]&&arguments[0];this.disabled||(!this.show||this.toggle||t)&&(this.show||this.embed||!this.$slots.caller||this.adjust(),this.show=!this.show,this.$emit("show",this.show))},whole:function(t){var e=this;if(this.show){var n=-1!==this.eventPath(t).findIndex(function(t){return t===e.$el});if(n&&!this.toggle&&!this.rightClick)return;(!n||n&&this.rightClick)&&this.visible(!0)}},adjust:function(){var t=this.$el.getBoundingClientRect(),e=null;this.show?e=this.$refs.dropdown.getBoundingClientRect():(this.$refs.dropdown.style.visibility="hidden",this.$refs.dropdown.style.display="inline-block",e=this.$refs.dropdown.getBoundingClientRect(),this.$refs.dropdown.style.visibility="visible",this.$refs.dropdown.style.display="none"),this.adjustTop(t,e),this.styleSheet.left=this.adjustLeft(t,e)+"px"},adjustTop:function(t,e){var n=window.pageYOffset,o=document.documentElement.clientHeight,i=this.rightClick?this.y:t.top+n,r=this.rightClick?this.y:t.top+t.height+5+n,s=!1,a=!1,l=!1;r+e.height>n+o&&(s=!0),i-5-e.heightn+o?a:r;case"center":return s+e.width>n+o?a:an.parts.length&&(o.parts.length=n.parts.length)}else{for(var s=[],i=0;i0)){var t=i(this.$refs.input).width;this.width=t>200?t:200}},clear:function(){this.text="",this.$emit("clear"),this.$refs.input.focus()},reset:function(){this.highlight=-1},getRow:function(t){switch(o(this.showField)){case"string":return t[this.showField]?t[this.showField]:"";case"function":return this.showField(t)?this.showField(t):""}},showChange:function(t){var e=this;this.show=t,t?this.$nextTick(function(){e.$refs.drop.adjust()}):this.reset()},selectItem:function(t){this.text=this.getRow(t),this.$emit("values",t),this.close()},populate:function(){var t=this,e=this.text.trim().toLowerCase();if(!this.data.length||!e)return[];var n=this.data.filter(function(n){var o=t.getRow(n).toLowerCase();return new RegExp(e).test(String(o))});return this.listed(n)},defaultList:function(){return this.fullList?this.listed():[]},listed:function(t){var e=this;return t||(t=this.data),this.maxLength?t.filter(function(t,n){return n 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n if (Object.keys(options).length) {\n if (typeof options.placeholder === 'string') _Suggest2.default.props.placeholder.default = options.placeholder;\n }\n\n Vue.component(_Suggest2.default.name, _Suggest2.default);\n }\n};\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\n__webpack_require__(2);\n\nvar _data = __webpack_require__(7);\n\nvar _data2 = _interopRequireDefault(_data);\n\nvar _methods = __webpack_require__(9);\n\nvar _methods2 = _interopRequireDefault(_methods);\n\nvar _render = __webpack_require__(10);\n\nvar _render2 = _interopRequireDefault(_render);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = {\n name: 'v-suggest',\n mixins: [_data2.default, _methods2.default, _render2.default]\n};\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a