Xem thử Live Search Trong Array Với Vue Js

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Live search cho vue js</title>
<style>
body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul.live-search-vue-js {
    max-height: 300px;
    overflow: auto;
    -webkit-box-shadow: 0 1px 3px 0 rgb(44 44 44 / 50%);
    -moz-box-shadow: 0 1px 3px 0 rgba(44,44,44,.5);
    box-shadow: 0 1px 3px 0 rgb(44 44 44 / 50%);
    top: 42px;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
}

.live-search-vue-js-out {
    max-width: 400px;
    margin: 0 auto;
}

ul.live-search-vue-js>li {
    list-style: none;
    margin-bottom: 14px;
    cursor: pointer;
}

ul.live-search-vue-js>li>label>input {
    margin-right: 5px;
}

ul.live-search-vue-js>li>label {
    cursor: pointer;
}

li.searchSuggestlitung>input {
    border-radius: 3px;
    padding: 5px;
    border: 1px solid #333;
}

.form-live-search-vue-js {
    position: relative;
}

.searchKeyWord input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js" defer></script>
</head>

<li  v-for="(item, index) in searchData" :key="index">
        <label :for="index"><input @click="selectedItem(index)"  autocomplete="off"  type="checkbox"  v-bind:id="index"  />{{item.name}}</label>
    </li>
</ul>
</div>
</div>
</div>
<script type="module">
new Vue({
el: '#app',
data: function () {
  return {
	nameSelected:[],  
    keyWord:'',
	searchDataTemp:[
		{ name: "Nguyễn văn A", selected: false},
		{ name: "Trần văn C",selected: false},
		{ name: "Đào thị B", selected: false},
		{ name: "Lại thị C", selected: false},
		{ name: "Lại thị E", selected: false},
		{ name: "Lại thị D", selected: false},
		{ name: "Lại thị F", selected: false},
		{ name: "Lại thị A", selected: false},
		{ name: "Lại thị M", selected: false},
		{ name: "Lại thị P", selected: false},
		{ name: "Lại thị G", selected: false}
	],
	searchData:[
		{ name: "Nguyễn văn A", selected: false},
		{ name: "Trần văn C",selected: false},
		{ name: "Đào thị B", selected: false},
		{ name: "Lại thị C", selected: false},
		{ name: "Lại thị E", selected: false},
		{ name: "Lại thị D", selected: false},
		{ name: "Lại thị F", selected: false},
		{ name: "Lại thị A", selected: false},
		{ name: "Lại thị M", selected: false},
		{ name: "Lại thị P", selected: false},
		{ name: "Lại thị G", selected: false}
	]
  }
},
methods:{
	searchSuggest(e){
		if(this.keyWord.length > 0){
			this.searchData = this.searchDataTemp.filter((item)=>{
				return this.keyWord.toLowerCase().split(' ').every(v => item.name.toLowerCase().includes(v))
			})
			
			
		}else{
			this.searchData  = this.searchDataTemp
			
		} 
		//console.log(searchDataTemp)
	},
	selectedItem(index){
		if(!this.searchData[index].selected){
			this.nameSelected.push(this.searchData[index].name)
			this.searchData[index].selected = !this.searchData[index].selected
		}else{
			this.searchData[index].selected = !this.searchData[index].selected
			const indexTemp = this.nameSelected.findIndex(item => item.name === this.searchData[index].name)
			this.nameSelected.splice(indexTemp, 1)
		}
		this.keyWord = this.nameSelected.toString()
	}
},
watch:{
    
},
created(){
}

})
</script>
</body>
</html>