code
<template> <div class="common-wrapper"> <el-select v-model="valueMeta"
multiple collapse-tags placeholder=" Please select a label "> <div class="el-input"
style="width:90%;margin-left:5%;"> <input type="text" placeholder=" Please input "
class="el-input__inner" v-model="dropDownValue" @keyup="dropDownSearch"> </div>
<el-option v-for="item in optionsMetaShow" :value="item"></el-option>
</el-select> </div> </template> <script> export default { data () { return {
dropDownValue: '', optionsMetaAll: [' Golden cake ', ' double-layer steamed milk custard ', ' Oyster omelet ', ' double-layer steamed milk custard 2', ' dragon whiskers noodles ',
' Beijing Roast Duck '], optionsMetaShow: [' Golden cake ', ' double-layer steamed milk custard ', ' Oyster omelet ', ' double-layer steamed milk custard 2', ' dragon whiskers noodles ', ' Beijing Roast Duck '],
valueMeta: [] } }, methods: { dropDownSearch () { var _this = this;
_this.valueMeta = []; _this.optionsMetaShow =
_this.optionsMetaAll.filter(_this.filterSearch); }, filterSearch (item) {
return item.includes(this.dropDownValue); }, } } </script> <style lang="">
.el-scrollbar { display: block !important; } </style>
design sketch
Technology