How to realize the function of searchable drop-down box in vue

This article introduces the relevant knowledge of "how to achieve the searchable drop-down box function in vue". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Effect picture:

Sub-component DROPDOWN.VUE

{{itemlist.cur.name}} {{item.name}} {{nodatatext}} export default {data () {return {datalist: [], isShow:false}}, props: {'itemlist':Object,// data from parent component' placeholder': {type:String, default: default value of 'search' / / input placeholder}, 'isNeedSearch': {/ / whether a search box type:Boolean is required Default: false}, 'nodatatext': {type:String, default:' result not found'/ / No text prompt}}, created () {this.datalist = this.itemlist.data / / Click outside the component, put away the document.addEventListener ('click', (e) = > {if (! this.$el.contains (e.target)) {this.isShow = false;}}, false)}, methods: {selectToggle (data) {this.itemlist.cur.name = data.name; this.isShow = false; this.$emit (' item-click',data);}, search (e) {let searchvalue = e.currentTarget.value This.datalist = this.itemlist.data.filter ((item,index,arr) = > {return item.name.indexOf (searchvalue)! =-1;});} .list-and-search {background: # fff; border: 1px solid # ccc; display: none; & .on {display: block;}}. Cur-name {height: 32px; line-height: 32px; text-indent: 10px; position: relative; color: # 777; &: after {position: absolute; right: 9px Top: 13px; content: ""; width: 0; height: 0; border-right: 6px solid transparent; border-top: 6px solid # 7b7b7b; border-left: 6px solid transparent; border-bottom: 6px solid transparent;} & .show {&: after {right: 9px; top: 6px; border-right: 6px solid transparent; border-bottom: 6px solid # 7b7b7b; border-left: 6px solid transparent; border-top: 6px solid transparent;} .vue-dropdown.default-theme {width: 200px; z-index:10 Border-radius:3px; border: 1px solid # ccc; cursor: pointer;-webkit-user-select:none; user-select:none; &. _ self-show {display: blockblockimport;} .search-module {position: relative; border-bottom: 1px solid # ccc;. Search-text {width: 100%; height: 30px; text-indent: 10px; / / border-radius: 0.5mm; box-shadow: none; outline: none; border: none / / &: focus {/ / border-color: # 2198f2; / /}}. Search-icon {position: absolute; top: 24%; right: 0.5mm; color: # aaa;}} input::-webkit-input-placeholder {font-size: 14px;}. List-module {max-height: 200px; overflow-y: auto; li {&. _ self-hide {display: none;} margin-top: 0.4em Padding: 0.4em; &: hover {cursor:pointer; color: # fff; background: # 00a0e9;}}. Tip-nodata {font-size: 14px; padding: 10px 0; text-indent: 10px;}

Parent component invocation

Import Dropdown from'@ / components/dropdown.vue'export default {data () {return {itemlist: {cur: {val: ", name:" all products "}, data: [{val:", name: "all products"}, {val: 1, name: "Fantasy Journey to the West"}, {val: 2, name: "Dream unparalleled"}, {val: 3 Name: "A Chinese Odyssey"}]},}}, components: {Dropdown,}, methods: {dropDownClick (e) {console.log (e.name, e.val)}

There is no search box by default. If necessary, you can send this: isNeedSearch= "true".

Ps: let's take a look at the vue component practice-searchable drop-down box

Practice to deepen the understanding and application of vue effective ways, this paper is based on vue's searchable drop-down box customization component implementation, recorded here.

First, effect

II. Component code

Dropdown.vue

{{item.name}} {{nodatatext}} export default {data () {return {datalist: []}}, props: {'show': {/ / for external control components showing / hiding type:Boolean, default:true},' itemlist':Array, 'placeholder':String,' nodatatext':String}, watch: {itemlist:function (val) {this.datalist = val.concat () }, directives: {'show-extend':function (el,binding,vnode) {/ / bind and update hooks let value = binding.value,searchInput = null; if (value) {el.style.display='block';} else {/ / hidden, restore the initial state el.style.display='none'; searchInput = el.querySelector (".search-text"); searchInput.value =''; vnode.context.datalist = vnode.context.itemlist / / restore rendering data}}, methods: {appClick:function (data) {this.$emit ('item-click',data);}, search:function (e) {let vm = this,searchvalue = e.currentTarget.value; vm.datalist = vm.itemlist.filter (function (item,index,arr) {return item.name.indexOf (searchvalue)! =-1;}) }, computed: {length:function () {return this.datalist.length;} .vue-dropdown.default-theme {position: absolute; left:15%; display: none; width: 70%; margin: 0 auto; margin-top: 1em; padding: 1em; z box-shadow index10; box-shadow: 0px 0px 10px # ccc; &. _ self-show {display: blockchain important;} .search-module {position: relative .search-text {width: 100%; height: 30px; padding-right: 2em; padding-left:0.5em; border-radius: 0.5mm; box-shadow: none; border: 1px solid # ccc; &: focus {border-color: # 2198f2;}} .search-icon {position: absolute; top: 24%; right: 0.5mm; color: # aaa List-module {max-height: 200px; overflow-y: auto; li {&. _ self-hide {display: none;} margin-top: 0.5em; padding: 0.5em; &: hover {cursor:pointer; color: # fff; background: # 00a0e9;} .tip _ nodata {font-size: 12px; margin-top: 1em;}

III. Use of components

This is the end of the content of "how to achieve the searchable drop-down box in vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!