Skip to content

Commit 54b0f0e

Browse files
BosNaufalBosNaufal
committed
first commit
0 parents  commit 54b0f0e

19 files changed

+5394
-0
lines changed

‎.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["es2015"],
3+
"plugins": ["transform-object-rest-spread","transform-vue-jsx"]
4+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Naufal Rabbani
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.

‎README.md

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
# Vue 2 Autocomplete
2+
Autocomplete Component For [Vue 2](http://vuejs.org). It's based on [vue-autocomplete](https://github.com/BosNaufal/vue-autocomplete)
3+
4+
<p align="center">
5+
<a href="./" title="Vue Autocomplete">
6+
<img src="./demo.gif" alt="vue Autocomplete component" title="Vue Autocomplete Component"/>
7+
</a>
8+
</p>
9+
10+
## Install
11+
You can import [vue2-autocomplete.vue](./src/js/components/vue-autocomplete.vue) to your vue component file like [this](./src/js/components/app.vue) and process it with your preprocessor.
12+
13+
You can install it via NPM
14+
```bash
15+
npm install vue2-autocomplete-js
16+
```
17+
18+
Or Just put it after Vue JS~
19+
```html
20+
<script src="https://vuejs.org/js/vue.min.js"></script>
21+
<script src="./dist/vue2-autocomplete.js"></script>
22+
<script>
23+
// Don't Forget to register it
24+
new Vue({
25+
components: {
26+
autocomplete: Vue2Autocomplete
27+
}
28+
});
29+
</script>
30+
```
31+
32+
## Import Style
33+
Don't forget to import vue 2 css. You can link it via html
34+
```html
35+
<link rel="stylesheet" href="vue2-autocomplete/dist/style/vue2-autocomplete.css">
36+
```
37+
38+
Or You can import it using commonJS
39+
40+
```javascript
41+
require('vue2-autocomplete-js/style/vue2-autocomplete.css')
42+
```
43+
44+
Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.
45+
46+
47+
## Import Module
48+
```javascript
49+
import Autocomplete from 'vue2-autocomplete-js'
50+
// Or
51+
var Autocomplete = require('vue2-autocomplete-js');
52+
```
53+
54+
## Usage
55+
```html
56+
<template>
57+
58+
<autocomplete
59+
url="http://localhost/proyek/goodmovie/api/api/v1/search"
60+
anchor="title"
61+
label="writer"
62+
:on-select="getData">
63+
</autocomplete>
64+
65+
</template>
66+
67+
68+
<script>
69+
70+
import Autocomplete from 'vue2-autocomplete-js';
71+
72+
export default {
73+
74+
components: { Autocomplete },
75+
76+
methods: {
77+
getFiles(obj){
78+
console.log(obj);
79+
}
80+
}
81+
};
82+
83+
</script>
84+
```
85+
86+
Full Props
87+
```html
88+
<template>
89+
90+
<autocomplete
91+
url="http://localhost/proyek/goodmovie/api/api/v1/search"
92+
anchor="title"
93+
label="writer"
94+
:on-select="getData"
95+
96+
id="custom id"
97+
class-name="custom class name"
98+
placeholder="placeholder"
99+
:init-value="initial value"
100+
:init-value="initial value"
101+
:custom-params="{ token: 'dev' }"
102+
:min="3"
103+
104+
:on-input="callbackEvent"
105+
:on-show="callbackEvent"
106+
:on-blur="callbackEvent"
107+
:on-hide="callbackEvent"
108+
:on-focus="callbackEvent"
109+
:on-select="callbackEvent"
110+
:on-before-ajax="callbackEvent"
111+
:on-ajax-progress="callbackEvent"
112+
:on-ajax-loaded="callbackEvent">
113+
</autocomplete>
114+
115+
</template>
116+
```
117+
118+
## Props
119+
#### url* (String)
120+
the URL must be active (not from file). the component will fetch JSON from this URL and passing one params (default : `q`) query. like:
121+
```
122+
http://some-url.com/API/list?q=
123+
```
124+
There are no filter and limit action inside the component. So, do it in your API logic.
125+
126+
127+
#### params (String)
128+
name of the search parameter to query in Ajax call. default is `q=`
129+
130+
131+
#### min (Number)
132+
Minimum input typed chars before performing the search query. default is `0`
133+
134+
135+
#### anchor* (String)
136+
It's a object property name that passed by your API. It's used for Anchor in suggestions list. Example `anchor="name"` will get the name property of your JSON object. Like ("Bambang", "Sukijan", "Bejo") in the demo above.
137+
138+
139+
#### label (String)
140+
Same as anchor but it's used for subtitle or description of list
141+
142+
143+
#### placeholder (String)
144+
Placeholder for input
145+
146+
#### className (String)
147+
Custom class name for autocomplete component
148+
149+
#### id (String)
150+
Custom id name for autocomplete component
151+
152+
153+
154+
## Callback Events
155+
You can make a callback event via props.
156+
157+
#### onInput (Function)
158+
On Input event in autocomplete
159+
160+
#### onShow (Function)
161+
On Show event in autocomplete list
162+
163+
#### onBlur (Function)
164+
When autocomplete is blured
165+
166+
#### onHide (Function)
167+
When autocomplete list is hidden
168+
169+
#### onFocus (Function)
170+
When autocomplete input in focus mode
171+
172+
#### onSelect (Function)
173+
When user has selected one item in the list
174+
175+
#### onBeforeAjax (Function)
176+
Before the ajax send
177+
178+
#### onAjaxProgress (Function)
179+
While ajax is fetching the data
180+
181+
#### onAjaxLoaded (Function)
182+
When ajax process is totally loaded
183+
184+
185+
## Methods
186+
You can do some methods by accessing the component via javascript.
187+
```javascript
188+
this.$refs.autocomplete.someMethod()
189+
```
190+
191+
#### setValue (String)
192+
To set the value of the autocomplete input
193+
194+
195+
196+
## Thank You for Making this useful~
197+
198+
## Let's talk about some projects with me
199+
Just Contact Me At:
200+
- Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)
201+
- Skype Id: bosnaufal254
202+
- twitter: [@BosNaufal](https://twitter.com/BosNaufal)
203+
204+
## License
205+
[MIT](http://opensource.org/licenses/MIT)
206+
Copyright (c) 2016 - forever Naufal Rabbani

‎browser.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue 2 Autocomplete (Browser Version)</title>
6+
<link rel="stylesheet" href="./dist/style/vue2-autocomplete.css">
7+
</head>
8+
<body>
9+
10+
11+
<div id="app">
12+
<autocomplete
13+
url="http://localhost/proyek/goodmovie/api/api/v1/search"
14+
:custom-params="{ token: 'dev' }"
15+
anchor="title"
16+
label="writer"
17+
:on-select="getData" >
18+
</autocomplete>
19+
</div>
20+
21+
<script src="https://vuejs.org/js/vue.js"></script>
22+
<script src="./dist/vue2-autocomplete.js"></script>
23+
<script>
24+
new Vue({
25+
el: "#app",
26+
27+
components: {
28+
autocomplete: Vue2Autocomplete
29+
},
30+
31+
methods: {
32+
getData(data) {
33+
console.log(data);
34+
}
35+
}
36+
37+
})
38+
</script>
39+
</body>
40+
</html>

‎build/build.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style/vue2-autocomplete.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
2+
.transition, .autocomplete, .showAll-transition, .autocomplete ul, .autocomplete ul li a{
3+
transition:all 0.3s ease-out;
4+
-moz-transition:all 0.3s ease-out;
5+
-webkit-transition:all 0.3s ease-out;
6+
-o-transition:all 0.3s ease-out;
7+
}
8+
9+
.autocomplete ul{
10+
font-family: sans-serif;
11+
position: absolute;
12+
list-style: none;
13+
background: #f8f8f8;
14+
padding: 10px 0;
15+
margin: 0;
16+
display: inline-block;
17+
min-width: 15%;
18+
margin-top: 10px;
19+
}
20+
21+
.autocomplete ul:before{
22+
content: "";
23+
display: block;
24+
position: absolute;
25+
height: 0;
26+
width: 0;
27+
border: 10px solid transparent;
28+
border-bottom: 10px solid #f8f8f8;
29+
left: 46%;
30+
top: -20px
31+
}
32+
33+
.autocomplete ul li a{
34+
text-decoration: none;
35+
display: block;
36+
background: #f8f8f8;
37+
color: #2b2b2b;
38+
padding: 5px;
39+
padding-left: 10px;
40+
}
41+
42+
.autocomplete ul li a:hover, .autocomplete ul li.focus-list a{
43+
color: white;
44+
background: #2F9AF7;
45+
}
46+
47+
.autocomplete ul li a span{
48+
display: block;
49+
margin-top: 3px;
50+
color: grey;
51+
font-size: 13px;
52+
}
53+
54+
.autocomplete ul li a:hover span, .autocomplete ul li.focus-list a span{
55+
color: white;
56+
}
57+
58+
.showAll-transition{
59+
opacity: 1;
60+
height: 50px;
61+
overflow: hidden;
62+
}
63+
64+
.showAll-enter{
65+
opacity: 0.3;
66+
height: 0;
67+
}
68+
69+
.showAll-leave{
70+
display: none;
71+
}

‎dist/vue2-autocomplete.js

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue 2 Autocomplete</title>
6+
</head>
7+
<body>
8+
9+
<app></app>
10+
11+
<script src="./build/build.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)