Live search trong array với vue js

19/09/2022 03:44 489

Table of Contents

Trong bài hôm nay mình sẽ chia sẽ cách làm live search trong array giống như hình bên dưới

Xem thử

Kiến thức cần nắm

-Tất nhiên là vue js

-filter array

-toLowerCase

Các bài viết khác có thể hữu ích với bạn

-split

-push array

-splice array

Event sử dụng

keyup: để làm search live

click: để làm chọn item

Giải thích cách hoạt động

Khi chúng ta gõ vào hộp search nó sẽ filter ra các name để đề xuất, và sau đó chúng ta chọn name nó sẽ lấy lên hộp search

Code tham khảo

<!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"></script>
</head>

<body>
<div class="live-search-vue-js-out">
<div id="app">
<div class="form-live-search-vue-js">
<div class="searchKeyWord">
<input  @keyup="searchSuggest" v-model="keyWord" type="text"   placeholder="Search" autocomplete="off"/>
</div>
<ul class="live-search-vue-js">

    <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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!doctype html>

<head>

<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>

</head>

<body>

</div>

</li>

</ul>

</div>

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>

Dùng includes Tìm kiếm trong array đơn giản [a,b,c] và string

includes dùng trong array

ví dụ

const arr = [1,2,3,6,7];
console.log(arr.includes(3));
console.log(arr.includes('3'));
console.log(arr.includes(8));

const arr = [1,2,3,6,7];

console.log(arr.includes(3));

console.log(arr.includes('3'));

console.log(arr.includes(8));

kết quả trả vềlần lượt là

true

false

vậy nên phải đung kiểu nó mới cho kết quả đúng (trường hợp 3 và ‘3’ là 2 kiểu khác nhau)

includes dùng trong string

const string = 'fcwordrepss.net là blog chia sẽ';
console.log(string.includes('fcwordrepss'));
console.log(string.includes('google'));

const string = 'fcwordrepss.net là blog chia sẽ';

console.log(string.includes('fcwordrepss'));

console.log(string.includes('google'));

Kết quả:

true

false

Dùng every để tìm kiếarray

every sẽ lặp qua tất cả phần tử của array, nếu tất cả phần tử trong array thỏa mãn điều kiện thì return về true và ngược lại là false

ví dụ

const arr = [3,4,5,6];
const every = arr.every((item) => {
		return item < 6
});
const every2 = arr.every((item) => {
		return item <= 6
});
console.log(every);
console.log(every2);

const arr = [3,4,5,6];

const every = arr.every((item) => {

return item < 6

});

const every2 = arr.every((item) => {

return item <= 6

});

console.log(every);

console.log(every2);

Kết quả:

false

true

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Làm option settings wordpress bằng vue js [ 15/10/2022 09:39 ]
Thực hiện ajax trong vòng lặp trong vue js [ 05/10/2022 01:19 ]
Import file excel tới data dùng thư viện php excel và vue js [ 01/10/2022 07:45 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Live search trong array với vue js

Kiến thức cần nắm

Event sử dụng

Giải thích cách hoạt động

Code tham khảo

Dùng includes Tìm kiếm trong array đơn giản [a,b,c] và string

includes dùng trong array

includes dùng trong string

Dùng every để tìm kiếarray

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)