How to perform form auto-completion and drop-down selector in Vue
Forms are an unavoidable part of the Vue development process. To improve user experience and efficiency, we often use form auto-completion and drop-down selectors to help users quickly enter and select data. Vue provides a variety of ways to implement form auto-completion and drop-down selectors. This article will introduce these methods in detail for you.
1. Use Vue-Autocomplete for form auto-completion
Vue-Autocomplete is an autocomplete component based on Vue.js, which can help us quickly implement form autocomplete.
Install Vue-Autocomplete
We can install Vue-Autocomplete using npm:
npm install vuejs-autocomplete --save
Introducing Vue-Autocomplete
Introduce Vue-Autocomplete in Vue's entry file:
import Vue from 'vue'
import Autocomplete from 'vuejs-autocomplete'
Vue.component('autocomplete', Autocomplete)
Here we register Vue-Autocomplete as a global component, and you can also introduce it in local components.
Using Vue-Autocomplete
To use Vue-Autocomplete in Vue components for form auto-completion, we need to use tags in the template <autocomplete>and bind data and options.
<template>
<div>
<autocomplete
v-model="selectedItem"
:data="items"
:placeholder="'Type something...'"
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple'],
}
},
}
</script>
In this example, we use <autocomplete>tabs to implement form autocomplete. We'll selectedItembind to v-modelto represent the option the user selected, and itemsto datato represent the optional option. At the same time, we can also set attributes such as placeholders to improve user experience.
Custom Vue-Autocomplete
If the default Vue-Autocomplete style does not meet your needs, you can customize the style.
First, you can introduce a custom style file in Vue's entry file:
import 'vuejs-autocomplete/dist/style/vuejs-autocomplete.css'
import './custom-style.css'
Here we have introduced the default style and custom style files of Vue-Autocomplete. You can modify the style file name and file path according to your own needs.
Then, write the styles in a custom style file:
.vue-autocomplete {
width: 100%;
position: relative;
}
.vue-autocomplete input {
width: 100%;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.vue-autocomplete .autocomplete-dropdown {
position: absolute;
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
z-index: 10;
border: 1px solid #ccc;
border-top: none;
}
.vue-autocomplete .autocomplete-dropdown .autocomplete-item {
padding: 10px;
cursor: pointer;
}
.vue-autocomplete .autocomplete-dropdown .autocomplete-item:hover {
background-color: #f5f5f5;
}
In this example, we have used CSS selectors to customize the styles to achieve a custom style.
2. Use Vue-Select for dropdown selector
Vue-Select is a drop-down selector component based on Vue.js, which can help us quickly implement the drop-down selector function.
Install Vue-Select
We can install Vue-Select using npm:
npm install vue-select --save
Introducing Vue-Select
Introduce Vue-Select in Vue's entry file:
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
Here we register Vue-Select as a global component, and you can also introduce it in local components.
Using Vue-Select
To use Vue-Select in Vue components for drop-down selectors, we need to use <v-select>tags in the template and bind data and options.
<template>
<div>
<v-select
v-model="selectedItem"
:options="items"
:placeholder="'Select an item...'"
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple'],
}
},
}
</script>
In this example, we've used <v-select>tags to implement a dropdown selector. We'll selectedItembind to v-modelto represent the option the user selected, and itemsto optionsto represent the optional option. At the same time, we can also set attributes such as placeholders to improve user experience.
Custom Vue-Select
If the default Vue-Select style does not meet your needs, you can customize the style.
First, you can introduce a custom style file in Vue's entry file:
import 'vue-select/dist/vue-select.css'
import './custom-style.css'
Here we introduce the default style and custom style files of Vue-Select, you can modify the style file name and file path according to your needs.
Then, write the styles in a custom style file:
.v-select {
width: 100%;
}
.v-select .dropdown-toggle {
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.v-select .dropdown-menu {
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
z-index: 10;
border: 1px solid #ccc;
border-top: none;
}
.v-select .dropdown-item {
padding: 10px;
cursor: pointer;
}
.v-select .dropdown-item:hover {
background-color: #f5f5f5;
}
In this example, we have used CSS selectors to customize the styles to achieve a custom style.
3. Form autocomplete and dropdown selectors with Element-UI
In addition to Vue-Autocomplete and Vue-Select, we can also use Element-UI to implement form auto-completion and drop-down selector functions.
Install Element-UI
We can install Element-UI using npm:
npm install element-ui --save
Introducing Element-UI
Introduce Element-UI in Vue's entry file:
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Here we register Element-UI as a Vue plug-in, and introduce the default style file at the same time.
Using Element-UI's autocomplete component
To use Element-UI's auto-completion component in Vue components for form auto-completion, we need to use tags in the template <el-autocomplete>and bind data and options.
<template>
<div>
<el-autocomplete
v-model="selectedItem"
:fetch-suggestions="querySearch"
placeholder="Type something..."
/>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple'],
}
},
methods: {
querySearch(queryString, cb) {
let items = this.items
let results = queryString ? items.filter(this.createFilter(queryString)) : items
cb(results)
},
createFilter(queryString) {
return (item) => {
return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
}
},
},
}
</script>
In this example, we use <el-autocomplete>tabs to implement form autocomplete. We'll selectedItembind v-modelto , representing the option the user selected, and we'll itemsbind to data, representing the optional option. At the same time, we also implemented a querySearchmethod called , which is used to get optional items based on the string entered by the user.
Using Element-UI's dropdown selector component
To use Element-UI's drop-down selector component in Vue components, we need to use tags in the template <el-select>and bind data and options.
<template>
<div>
<el-select v-model="selectedItem" placeholder="Select an item...">
<el-option v-for="item in items" :key="item" :label="item" :value="item" />
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple'],
}
},
}
</script>
In this example, we've used <el-select>tags to implement a dropdown selector. We'll selectedItembind v-modelto , representing the option the user selected, and we'll itemsbind to data, representing the optional option. At the same time, we also use <el-option>tags to define options.
Custom Element-UI components
If the default Element-UI component style cannot meet your needs, you can customize the style.
First, you can introduce a custom style file in Vue's entry file:
import 'element-ui/lib/theme-chalk/index.css'
import './custom-style.css'
Here we introduce the default style and custom style files of Element-UI, and you can modify the style file name and file path according to your own needs.
Then, write the styles in a custom style file:
.el-autocomplete {
width: 100%;
}
.el-autocomplete__input {
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.el-autocomplete__popper {
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
z-index: 10;
border: 1px solid #ccc;
border-top: none;
}
.el-autocomplete__item {
padding: 10px;
cursor: pointer;
}
.el-autocomplete__item:hover {
background-color: #f5f5f5;
}
.el-select {
width: 100%;
}
.el-select__input {
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.el-select-dropdown {
max-height: 200px;
overflow-y: auto;
}
.el-select-dropdown__item {
padding: 10px;
cursor: pointer;
}
.el-select-dropdown__item:hover {
background-color: #f5f5f5;
}
In this example, we have used CSS selectors to customize the styles to achieve a custom style.
in conclusion
Form autocomplete and dropdown selectors are very common features in the development process of Vue. We can use component libraries such as Vue-Autocomplete, Vue-Select, and Element-UI to achieve these functions. Whichever you choose, attention to detail and user experience is required to improve the quality and usability of your app.
I hope this article can help you learn and master the implementation of form auto-completion and drop-down selectors in Vue. If you have any questions or suggestions, please leave a message in the comment area, I will reply as soon as possible.