├── .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 | 
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 |
58 |
63 |
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