Vue.js自动完成的介绍
vue.js自动完成被定义为一个无CSS的vue.js组件，因此可以通过任何框架来定制Vue应用程序的外观，其中还包括支持数据绑定、过滤、可访问性、分组和更多其他功能。这个vue.js自动完成功能也被定义为一个文本框组件，具有上述整个相同的功能，以及对用户选择用户类型的建议或意见列表。这个组件需要安装，它也可以作为一个指令v-autocomplete使用，其中包含各种道具。
vue.js自动完成功能在Vue应用程序中的工作原理
在这篇文章中，我们将看到自动完成是一个vue.js组件，它在v-autocomplete指令中提供了灵活的键入功能，用于从API中搜索大量的信息或数据，这个组件还提供了各种功能的支持，如过滤、绑定、分组等，以及各种道具，如允许溢出、追加图标、附加、自动选择优先、来源、方法、输入类、名称等。要在vue.js应用程序中安装自动完成组件，我们必须运行以下命令。
npm install vuejs-auto-complete –save
在这篇文章中，我们将看到自动完成组件主要是一个免费的CSS，主要用于让用户从冗长的列表中轻松选择，通过使输入自动完成而不是仅仅是下拉，简单地说，自动完成组件将帮助用户选择他们正在输入的内容，而不是在给定的列表中搜索，提供各种功能，如绑定、分组、过滤等，这样做。
所以一般来说，通过以上部分，我们可以说vue.js应用程序的自动完成功能是作为一个高级输入元素，用户在输入框中输入的搜索建议。
在vue．js应用程序的自动完成组件支持搜索建议功能，如数据绑定，它可以帮助用户使用数据管理器来管理大量的数据，用自定义的选项来处理请求的数据，也可以进行适当的数据处理；过滤，它有一个内置的过滤选项，也有自定义的选项，如用类型过滤，用文本铸造过滤，用最小字符过滤等；分组也是自动完成组件支持的另一个功能，主要用于安排或分组的逻辑来搜索特定数据。这个组件还支持一个自定义属性允许自定义，这个属性必须启用，以帮助用户指定输入任何自定义值，这意味着这些值不需要存在于定义的值集或指定的给定列表中，这个属性默认是启用的，当表单即将提交时，这些自定义值将被发送到处理程序，还有其他属性，如弹出高度和弹出宽度也是自定义的，默认它将调整到自动完成输入框。因此，这个自动完成组件支持许多不同的功能，用于设计vue.js应用程序的高级输入文本框，在冗长的数据列表中搜索数据。
现在我们将看到如何在html文件中定义自动完成组件。在html文件中，我们知道我们使用
<div id = “autoapp”
<auto-complete> …..</auto-complete>
</div>
So to define this component in the javascript we can write the code as below:
Vue.component(‘auto-complete’, {
new Vue ({
….
autocompleteVaule:….
)}
}
让我们考虑一个例子，vue.js应用程序的设计是为了输入用户的详细信息和他们的国家名称，所以当用户输入国家名称时，它将自己搜索并直接给出国家名称，而不是由你在给定的下拉列表中搜索它。但是，首先，让我们看看这样一个表格的样本快照。
在上面的截图中，我们可以看到在国名栏中没有输入任何东西，"你的国家"，所以当我们输入国名时，它会自动搜索类似的名字，并显示列表供用户选择，在第二个截图中我们看到，当我们输入国名 "Ind "时，它会给出一个以相同字母开头的国名列表，列表中有 "印度 "和 "印度尼西亚"，所以我们可以轻松选择 "印度"。这就是我们在设计vue.js应用程序时如何使用自动完成组件，帮助用户轻松搜索建议。
这就是其中一个例子，说明我们如何在下面的代码中创建一个带有自动完成组件的vue.js应用程序。
因此，我们必须创建一个html文件，使用脚本标签，我们必须导入vue.js库，如vue.js和Axios库，这可以写成
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
然后在同一个html文件中，我们还必须在一个带有自动完成标签的div标签中创建一个带有自动完成组件的前端，这可以写成
<div id="app">
<autocomplete>
…..
</autocomplete>
</div>
因此，html文件看起来就像下面的屏幕截图一样
然后，我们必须创建一个vue.js文件来编写vue.js自动完成组件，它可以写成以下样子
var autocompleteComponent = Vue.component(‘autocomplete’, {
……
});
然后，我们还必须在vue.js文件中声明自动完成组件中使用的方法和一些数据变量，为了写这些，我们必须写出如下代码:
var app = new Vue({
…..
})
因此，vue.js文件看起来就像下面的截图一样。
然后对于样式，我们使用CSS，所以我们知道要写css代码，我们必须使用style标签，然后在这个style标签中写下样式属性和要求。
<style>
……
</style>
因此，css文件看起来就像下面的截图一样。
完整的代码看起来如下
HTML文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="autocompleteapp">
<autocomplete
:place-holder-text="placeHolderInputText"
:result-items="autoCompleteResult"
:on-key-up="onKeyUpAutoCompleteEvent"
:on-selected="onSelectedAutoCompleteEvent"
:auto-complete-progress="autoCompleteProgress"
:item-text="autoCompleteText"
:item-id="autoCompleteFieldId">
</autocomplete>
</div>
Vue.js文件
var autoCompleteComponent = Vue.component('autocomplete', {
props: {
placeHolderText: String,
onKeyUp: Function,
onSelected: Function,
resultItems: Array,
autoCompleteProgress: Boolean,
itemText: String,
itemId: String
},
data() {
return {
keywordSearch: ''
}
},
模板：
<div class="autocomplete">
<input type="text" :placeholder="placeHolderText" v-model="keywordSearch" class="form-textinput" :class="{ 'loading-circle' : (keywordSearch.length > 2), 'hide-loading-circle': resultItems.length > 0 || resultItems.length == 0 && !autoCompleteProgress }" @keyup="!autoCompleteProgress ? onKeyUp(keywordSearch) : ''"/>
<ul class="autocomplete-results" v-if="resultItems.length > 0">
<li class="autocomplete-result" v-for="(item,i) in resultItems" :key="i" @click="keywordSearch='';onSelected(item[itemId], item[itemText])">
{{ item[itemText] }}
</li>
</ul>
</div>
`
});
var app = new Vue({
el: '# autocompleteapp,
data: {
placeHolderInputText: 'Enter country name',
autoCompleteResult: [],
autoCompleteProgress: false,
autoCompleteText: "name",
autoCompleteFieldId: "alpha3Code"
},
methods: {
onSelectedAutoCompleteEvent(id, text){
this.autoCompleteProgress = false;
this.autoCompleteResult = [];
alert("You have selected " + id + ": " + text);
},
onKeyUpAutoCompleteEvent(keywordEntered){
this.autoCompleteResult = [];
this.autoCompleteProgress = false;
if(keywordEntered.length > 2){
this.autoCompleteProgress = true;
axios.get("https://restcountries.eu/rest/v2/name/" + keywordEntered)
.then(response => {
var newData = [];
response.data.forEach(function(item, index){
if(item.name.toLowerCase().indexOf(keywordEntered.toLowerCase()) >= 0){
newData.push(item);
}
});
this.autoCompleteResult = newData;
this.autoCompleteProgress = false;
})
.catch(e => {
this.autoCompleteProgress = false;
this.autoCompleteResult = [];
})
}else{
this.autoCompleteProgress = false;
this.autoCompleteResult = [];
}
},
}
})
CSS文件
<style>
.loading-circle {
background-color: #ffffff;
background-image: url("loading.gif");
background-size: 16px 16px;
background-position: right center;
background-repeat: no-repeat;
}
.hide-loading-circle {
background: none;
}
.form-textinput{
padding:8px 10px;
border-radius:5px;
border:solid 1px #ccc;
}
.autocomplete {
position: relative;
}
.autocomplete-results {
padding: 0;
margin: 0;
border: 1px solid #eeeeee;
height: 120px;
overflow: auto;
background-color:#fdf8f3;
border-radius:5px;
}
.autocomplete-result {
list-style: none;
text-align: left;
padding: 4px 10px;
cursor: pointer;
}
.autocomplete-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
因此，输出结果将如下:
因此，通过这种方式，你可以用自动完成组件创建你的vue.js应用程序。上面的代码只是一个示例代码，以了解在哪里写哪些标签，以及如何使用到自动完成组件及其标签来获得自动完成的文本框。之后，我们可以自己创建，以拥有相应的其他功能。
总结
在这篇文章中，我们得出结论，vue.js自动完成组件被定义为具有自由CSS的组件，用于处理应用程序中的搜索建议，使用户能够轻松地在给定的冗长列表中搜索数据。在这篇文章中，我们看到了应用程序在搜索数据时的样子，它产生了直接的搜索结果而不是用户搜索整个列表。这篇文章还看到了自动完成组件所支持的功能，如数据绑定、分组、过滤等。
