├── .gitignore
├── README.md
├── package.json
└── vue-suggestions.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.idea
3 | /.vscode


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-suggestions
 2 | Vue компонент для плагина сервиса Подсказок DaData.ru
 3 | 
 4 | # Требования
 5 | - Vue.js `^2.3.0`
 6 | 
 7 | # Установка
 8 | 
 9 | ## npm
10 | 
11 | ```shell
12 | $ npm install --save vue-suggestions
13 | ```
14 | 
15 | ## yarn
16 | 
17 | ```shell
18 | $ yarn add vue-suggestions
19 | ```
20 | 
21 | # Использование
22 | ```html
23 | <template>
24 |   <div>
25 |     <VueSuggestions
26 |         :model.sync="city"
27 |         :coordinates.sync="coordinates"
28 |         :placeholder="'Начните вводить'"
29 |         :class="form-control"
30 |         :options="suggestionOptions">
31 |     </VueSuggestions>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 |   import VueSuggestions from 'vue-suggestions';
37 | 
38 |   export default {
39 |     data() {
40 |       return {
41 |         city: '',
42 |         coordinates: {
43 |           latitude: '',
44 |           longitude: ''
45 |         },
46 |         suggestionOptions: {
47 |           // @see https://confluence.hflabs.ru/pages/viewpage.action?pageId=207454318
48 |           token: 'abcd123',
49 |           type: "ADDRESS",
50 |           scrollOnFocus: false,
51 |           triggerSelectOnBlur: false,
52 |           triggerSelectOnEnter: false,
53 |           addon: 'none',
54 |           // @see https://confluence.hflabs.ru/pages/viewpage.action?pageId=207454320
55 |           onSelect (suggestion) {
56 |             
57 |           }
58 |         },
59 |       }
60 |     },
61 |     components: { VueSuggestions }
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-suggestions",
 3 |   "version": "1.4.0",
 4 |   "description": "Vue компонент для плагина сервиса Подсказок DaData.ru",
 5 |   "main": "vue-suggestions.vue",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/evseevdev/vue-suggestions.git"
 9 |   },
10 |   "keywords": [
11 |     "suggestions",
12 |     "vue.js"
13 |   ],
14 |   "author": "Vladimir Evseev",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/evseevdev/vue-suggestions/issues"
18 |   },
19 |   "homepage": "https://github.com/evseevdev/vue-suggestions#readme",
20 |   "dependencies": {
21 |     "jquery": "^3.2.1",
22 |     "suggestions-jquery": "^17.5.0"
23 |   }
24 | }
25 |  


--------------------------------------------------------------------------------
/vue-suggestions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input type="text" v-model="value">
 3 | </template>
 4 | 
 5 | <script>
 6 |   import $ from 'jquery';
 7 |   import 'suggestions-jquery';
 8 | 
 9 |   export default {
10 |     props: {
11 |       model: {
12 |         required: true
13 |       },
14 |       coordinates: {},
15 |       options: {
16 |         type: Object,
17 |         default: {
18 |           type: 'ADDRESS',
19 |           addon: 'none'
20 |         }
21 |       }
22 |     },
23 |     data() {
24 |       return {
25 |         value: '',
26 |         coords: {
27 |           latitude: '',
28 |           longitude: ''
29 |         },
30 |       }
31 |     },
32 |     mounted() {
33 |       this.callbacks = $.Callbacks();
34 |       this.value = this.model;
35 |       this.initSuggestion();
36 |     },
37 |     destroyed() {
38 |       this.destroySuggestion();
39 |     },
40 |     watch: {
41 |       coords: {
42 |         handler() {
43 |           this.$emit('update:coordinates', this.coords);
44 |         },
45 |         deep: true
46 |       },
47 |       value() {
48 |         this.$emit('update:model', this.value);
49 |       },
50 |       model() {
51 |         this.value = this.model;
52 |       }
53 |     },
54 |     methods: {
55 |       initSuggestion() {
56 |         this.callbacks.add(this.onSelect);
57 |         this.callbacks.add(this.options.onSelect || $.noop)
58 |         const options = Object.assign({}, this.options, {
59 |           onSelect: suggestion => this.callbacks.fire(suggestion)
60 |         });
61 |         $(this.$el).suggestions(options);
62 |       },
63 |       destroySuggestion() {
64 |         const plugin = $(this.$el).suggestions();
65 |         plugin.dispose();
66 |       },
67 |       onSelect(suggestion) {
68 |         this.value = suggestion.value;
69 |         const { geo_lat, geo_lon } = suggestion.data;
70 |         this.coords.latitude = geo_lat;
71 |         this.coords.longitude = geo_lon;
72 |       }
73 |     }
74 |   };
75 | </script>
76 | 


--------------------------------------------------------------------------------