Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js

09/09/2022 07:20 263

Table of Contents

Sử dụng filter trong array để làm chức năng tìm kiếm. Vâng việc tìm kiếm trong array với dữ liệu trung bình thì sẽ giúp tấp độ tìm kiếm nhanh hơn so với query vào database và sau đây là ví dụ

Dữ liệu form tìm kiếm

searchData: {
			bySelected: 'user_email',
			keyword: '',
			options: [
				{ value: 'user_email', name: 'Email'	},
				{ value: 'user_login', name: 'Tên đăng nhập'	},
				{ value: 'full_name', name: 'Họ và tên'	},
				{ value: 'phone', name: 'Điện thoại'	},
				{ value: 'user_id', name: 'UserID'	},
				{ value: 'domain', name: 'Url hoặc domain'	},
				
				
			]
		}

searchData: {

bySelected: 'user_email',

keyword: '',

options: [

{ value: 'user_email', name: 'Email' },

{ value: 'user_login', name: 'Tên đăng nhập' },

{ value: 'full_name', name: 'Họ và tên' },

{ value: 'phone', name: 'Điện thoại' },

{ value: 'user_id', name: 'UserID' },

{ value: 'domain', name: 'Url hoặc domain' },

]

}

Sử dụng watch để xử lý

'searchData.keyword' : function(){
			let bySelected = this.searchData.bySelected
			if(this.searchData.keyword.length > 0){
				console.log(bySelected)
				
				this.list = this.allRows.filter((item)=>{
					console.log(item.user[bySelected])
					if("user_id" === bySelected){
						return this.searchData.keyword == item.user[bySelected]
					}else if("domain" === bySelected) {
						//return this.searchData.keyword == item[bySelected]
						return this.searchData.keyword.toLowerCase().split(' ').every(v => item[bySelected].includes(v))
					}else{
						return this.searchData.keyword.toLowerCase().split(' ').every(v => item.user[bySelected].toLowerCase().includes(v))
					}
					
				})
				this.totalRecord = this.list.length
				this.pagination.total = this.list.length
				this.pagination.max = this.pagination.total/this.pagination.per_page
				
			}else{
				// console.log('sdfsd')
				this.list = this.listTemp
				this.totalRecord = this.list.length
				
			} 
			//
		},
		'searchData.bySelected' : function(){
			let bySelected = this.searchData.bySelected
			if(this.searchData.keyword.length > 0){
				this.list = this.allRows.filter((item)=>{
					if("user_id" === bySelected){
						return this.searchData.keyword == item.user[bySelected]
					}else if("domain" === bySelected) {
						//return this.searchData.keyword == item[bySelected]
						return this.searchData.keyword.toLowerCase().split(' ').every(v => item[bySelected].includes(v))
					}else{
						return this.searchData.keyword.toLowerCase().split(' ').every(v => item.user[bySelected].toLowerCase().includes(v))
					}
					
				})
				this.totalRecord = this.list.length
				this.pagination.total = this.list.length
				this.pagination.max = this.pagination.total/this.pagination.per_page
				
			}else{
				// console.log('sdfsd')
				this.list = this.listTemp
				this.totalRecord = this.list.length
				
			} 
			//
		}

'searchData.keyword' : function(){

let bySelected = this.searchData.bySelected

if(this.searchData.keyword.length > 0){

console.log(bySelected)

this.list = this.allRows.filter((item)=>{

console.log(item.user[bySelected])

if("user_id" === bySelected){

return this.searchData.keyword == item.user[bySelected]

}else if("domain" === bySelected) {

//return this.searchData.keyword == item[bySelected]

return this.searchData.keyword.toLowerCase().split(' ').every(v => item[bySelected].includes(v))

}else{

return this.searchData.keyword.toLowerCase().split(' ').every(v => item.user[bySelected].toLowerCase().includes(v))

}

})

this.totalRecord = this.list.length

this.pagination.total = this.list.length

this.pagination.max = this.pagination.total/this.pagination.per_page

}else{

// console.log('sdfsd')

this.list = this.listTemp

this.totalRecord = this.list.length

}

'searchData.bySelected' : function(){

let bySelected = this.searchData.bySelected

if(this.searchData.keyword.length > 0){

this.list = this.allRows.filter((item)=>{

if("user_id" === bySelected){

return this.searchData.keyword == item.user[bySelected]

}else if("domain" === bySelected) {

//return this.searchData.keyword == item[bySelected]

return this.searchData.keyword.toLowerCase().split(' ').every(v => item[bySelected].includes(v))

}else{

return this.searchData.keyword.toLowerCase().split(' ').every(v => item.user[bySelected].toLowerCase().includes(v))

}

})

this.totalRecord = this.list.length

this.pagination.total = this.list.length

this.pagination.max = this.pagination.total/this.pagination.per_page

}else{

// console.log('sdfsd')

this.list = this.listTemp

this.totalRecord = this.list.length

}

5/5 (1 Đánh giá)

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

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 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js

Dữ liệu form tìm kiếm

Sử dụng watch để xử lý

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)