Chào mọi người! Hôm nay, chúng ta sẽ hướng dẫn cách xây dựng một thanh tìm kiếm chức năng nhưng rất đơn giản … Được gắn thẻ với javascript, html, css, người mới bắt đầu.

Bạn đang xem : tạo thanh tìm kiếm trong javascript

Xin chào mọi người!

Hôm nay, chúng ta sẽ hướng dẫn cách tạo một thanh tìm kiếm chức năng nhưng rất đơn giản trong JavaScript. Dự án nhỏ này cũng sẽ sử dụng CSS và HTML.

💭💭💭💭💭💭💭💭💭💭💭

Hãy xem xét các mục tiêu của chúng tôi:

Giờ chúng ta đã có phác thảo rõ ràng về những gì chúng ta cần đạt được … hãy bắt đầu!



Tạo tệp cơ sở

Hãy nhớ rằng: đây là một dự án đơn giản. Bạn có thể muốn thêm và chỉnh trang nó như bạn muốn. Nhưng đối với nhu cầu ngày nay, chúng tôi sẽ chỉ cần ba (3) tệp:

  1. index.js
  2. index.html
  3. style.css

Chúng tôi có một (1) tệp JavaScript chứa trình xử lý sự kiện, các hàm, khai báo biến + phép gán và dữ liệu cơ bản của chúng tôi.

Chúng tôi có một (1) tệp HTML sẽ chứa các phần tử DOM của chúng tôi và mô tả mã của chúng tôi ở định dạng hiển thị trên trang web.

Và chúng tôi có một (1) tệp CSS mà chúng tôi sẽ sử dụng để tạo kiểu cho các phần tử HTML của mình và thêm một số nét tinh tế + sáng tạo.

Bạn có thể tạo các tệp này trực tiếp trong trình chỉnh sửa mã của mình (bằng cách nhấp chuột phải và chọn “tệp mới” hoặc sử dụng nút tệp mới) hoặc trong thiết bị đầu cuối của bạn:

  touch index.html
chạm vào index.js
touch style.css
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình



Xây dựng Kiến thức cơ bản về HTML

Tôi thường sử dụng mẫu chuẩn của HTML5 để bắt đầu; nó trông giống như thế này:

  

& lt;! DOCTYPE html & gt;

& lt; html

lang =

"vi"

& gt;

& lt; head & gt;

& lt; meta

charset =

"UTF-8"

& gt;

& lt; meta

http-equiv =

"X-UA-Tương thích"

content =

"IE = edge"

& gt;

& lt; meta

name =

"viewport"

content =

" width = device-width, initial-scale = 1.0 "

& gt;

& lt; title & gt;

Thanh Tìm kiếm

& lt; / title & gt;

& lt; link

rel =

"bảng định kiểu"

href =

" style.css "

& gt;

& lt; / head & gt;

& lt; body & gt;

& lt; script

src =

"index.js"

& gt; & lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Trong thẻ tiêu đề, bạn có thể đặt tên cho dự án của mình bất kỳ thứ gì bạn muốn. Điều này không nhất thiết phải hiển thị trên trang trình duyệt, nhưng hiển thị dưới dạng nhãn tab trên trình duyệt của bạn.

  

& lt; title & gt;

Thanh Tìm kiếm

& lt; / title & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Hai (2) điều quan trọng cần thêm vào ban đầu (và theo ý tôi ban đầu là ngay lập tức !) là thẻ liên kết thẻ tập lệnh cần thiết >. Bắt đầu thực hành thêm thẻ liên kết của tệp style.css và thẻ tập lệnh của tệp index.js khi bạn bắt đầu tạo tệp HTML của mình.

  

& lt; head & gt;

& lt; link

rel =

"bảng định kiểu"

href =

" style.css "

& gt;

& lt; / head & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Các bảng định kiểu sẽ nằm trong phần thẻ head của tệp HTML của bạn. Thẻ này cho phép bất kỳ kiểu nào bạn lập trình trong tệp CSS của mình hiển thị rõ ràng trên trình duyệt.

Trong khi thẻ script cho tệp JavaScript của bạn sẽ nằm trong thẻ body. Người ta thường đặt nó về phía dưới cùng. Điều quan trọng là phải kết nối tệp HTML với bất kỳ tệp JS nào của bạn. Các tệp JS của bạn sẽ tham chiếu đến các phần tử DOM từ HTML của bạn.

  

& lt; body & gt;

& lt; script

src =

"index.js"

& gt; & lt; / script & gt;

& lt; / body & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Bây giờ, chúng tôi sẽ cần một số phần tử được lồng trong phần nội dung HTML của chúng tôi. Chúng tôi chắc chắn sẽ cần:

  • phần tử biểu mẫu có trường đầu vào
  • nút “xóa” để xóa kết quả của chúng tôi
  • một phần tử danh sách không có thứ tự để giữ kết quả của chúng tôi

Đây là một ví dụ:

  

& lt; body & gt;

& lt; div

class =

"form-container"

& gt;

& lt; form

class =

"form"

& gt;

& lt; input

id =

"search"

type =

" text "

class =

" input "

placeholder =

"search ..."

/ & gt;

& lt; button

id =

"clear"

class =

" clear-results "

& gt;

clear

& lt; / nút & gt;

& lt; / form & gt;

& lt; / div & gt;

& lt; div

class =

"results-container & gt; & lt; ul class = "

results-list

"

id =

"danh sách"

& gt;

& lt; / ul & gt;

& lt; / div & gt;

& lt; script

src =

"index.js"

& gt; & lt; / script & gt;

& lt; / body & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Với mỗi phần tử, hãy cung cấp tên “lớp” và / hoặc “id”. Đảm bảo rằng tên lớp hoặc tên id phản ánh những gì phần tử đang làm hoặc cung cấp.

Từ bên ngoài vào, tôi đã tạo một phần tử div có tên là “form-container”; đây là một tiêu chuẩn thông thường trong JavaScript. Chúng tôi muốn các phần khác nhau của chúng tôi, có vai trò cụ thể, được lồng vào các vùng chứa riêng của chúng. Vì vậy, vùng chứa biểu mẫu của chúng ta chứa biểu mẫu và các nút liền kề. Sau đó, chúng tôi có một div khác được gọi là “results-container”, điều này sẽ giữ kết quả của chúng tôi.

Trong vùng chứa biểu mẫu của chúng tôi, tôi đã tạo một phần tử biểu mẫu. Điều này nắm giữ các yếu tố hình thức thành công của chúng tôi. Tôi đã tạo một thẻ đầu vào có loại “văn bản”. Điều này cho phép người dùng nhập bên trong biểu mẫu đầu vào. Tôi cũng đã cung cấp tên lớp, id và trình giữ chỗ. Sau đó, tôi tạo nút “submit” với một loại “submit”; nút này cũng có tên lớp. Văn bản giữa các thẻ nút sẽ hiển thị “tìm kiếm” trên nút trong trình duyệt. Ý tưởng tương tự cũng xảy ra đối với nút “xóa”.

Trình duyệt của chúng tôi sẽ trông giống như sau:
thanh tìm kiếm

Vì vậy, tệp HTML của chúng tôi đã được thiết lập: hãy tiếp tục vào tệp JavaScript của chúng tôi.



Tạo dữ liệu đơn giản

Vì chúng tôi không tham chiếu đến một API, vì đây là một dự án đơn giản, chúng tôi sẽ tạo một số dữ liệu đơn giản để hiển thị trên trang dưới dạng kết quả tìm kiếm. Đi vào tệp index.js của bạn.

Tôi muốn tạo dữ liệu bằng cách sử dụng các mảng lồng nhau JavaScript. Ví dụ hôm nay, dữ liệu của chúng tôi sẽ là tên của mọi người. Vì vậy, mảng của chúng tôi sẽ được gọi là “người”.

  

const

người

=

[]

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Mỗi mục mảng sẽ là một đối tượng — nghĩa là mỗi mục mảng sẽ có một thuộc tính và giá trị.

  

const

người

=

[

{

tên

:

'

adri

'

},

{

tên

:

'

hay quá

'

},

{

tên

:

'

chris

'

},

{

tên

:

'

dillon

'

},

{

tên

:

'

evan

'

},

{

tên

:

'

Frank

'

},

{

tên

:

'

georgette

'

},

{

tên

:

'

hugh

'

},

{

tên

:

'

igor

'

},

{

tên

:

'

jacoby

'

},

{

tên

:

'

kristina

'

},

{

tên

:

'

lemony

'

},

{

tên

:

'

matilda

'

},

{

tên

:

'

nile

'

},

{

tên

:

'

ophelia

'

},

{

tên

:

'

Patrick

'

},

{

tên

:

'

quincy

'

},

{

tên

:

'

roslyn

'

},

{

tên

:

'

solene

'

},

{

tên

:

'

timothy

'

},

{

tên

:

'

uff

'

},

{

tên

:

'

violet

'

},

{

tên

:

'

wyatt

'

},

{

tên

:

'

x

'

},

{

tên

:

'

yadri

'

},

{

tên

:

'

zack

'

},

]

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Đây là dữ liệu đơn giản của chúng tôi! Hãy thoải mái tạo ra một loạt các món ăn, màu sắc, chương trình truyền hình … bất cứ thứ gì bạn muốn!



Thiết lập Trình xử lý sự kiện

Chúng tôi phải thiết lập hai (2) người nghe sự kiện. Trình xử lý sự kiện đợi một sự kiện xảy ra (một “nhấp chuột”, một “tổ hợp phím”, “đầu vào”) và sau đó gọi một hành động. Trong trường hợp này, chúng ta cần phải có điều gì đó xảy ra khi đầu vào được nhập vào biểu mẫu đầu vào và khi nút xóa được nhấp. Trong JavaScript, cú pháp trình xử lý sự kiện trông giống như sau:

  

anythingElement

.

addEventListener

(

"

loại sự kiện

"

,

()

= & gt;

{

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

< br />

  

const

searchInput

=

document

.

querySelector

(< / p>

'

. input

'

)

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Bây giờ tôi sẽ đính kèm trình xử lý sự kiện vào hằng số mà chúng tôi đã khai báo và gán:

  

searchInput

.

addEventListener

(

"

đầu vào

" < / p>

,

(

e

)

= & gt;

{

// bên trong, chúng ta cần đạt được một số điều sau:

// 1. khai báo và gán giá trị đích của sự kiện cho một biến AKA bất cứ thứ gì được nhập vào thanh tìm kiếm

let

value

=

e

.

target

.

value

// 2. kiểm tra: nếu đầu vào tồn tại và nếu đầu vào lớn hơn 0

if

(

value

& amp; & amp ;

value

.

trim

().

length

& gt;

0

< p class = "p">) {

// 3. xác định lại 'giá trị' để loại trừ khoảng trắng và thay đổi đầu vào thành tất cả chữ thường

giá trị

=

giá trị

.

trim

().

toLowerCase

()

// 4. chỉ trả về kết quả nếu giá trị của tìm kiếm được bao gồm trong tên của người đó

// chúng ta cần viết mã (một hàm để lọc qua dữ liệu của chúng ta để bao gồm giá trị đầu vào tìm kiếm)

}

else

{

// 5. không trả lại gì

// đầu vào không hợp lệ - hiển thị thông báo lỗi hoặc không hiển thị kết quả

}

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Hãy tạo nền tảng cho nút rõ ràng:

  

const

clearButton

=

document

.

getElementById

(< / p>

'

clear

'

)

clearButton

.

addEventListener

(

"

nhấp vào

"

,

()

= & gt;

{

// 1. viết một hàm xóa mọi kết quả trước đó khỏi trang

})

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình



Hiển thị Kết quả trên Trang

Để hiển thị kết quả của chúng tôi, cuối cùng chúng tôi phải lặp lại dữ liệu đơn giản của mình và nếu bất kỳ dữ liệu nào khớp với giá trị đầu vào, sau đó nối dữ liệu vào trang (có thể nhìn thấy được).

Hãy tạo một hàm trước tiên gắn kết quả vào trang web.

  

// tạo và khai báo một hàm có tên "setList"

// setList lấy tham số là "results"

function

setList

(

results

) {

dành cho

(

const

người

trong số

kết quả

) {

// tạo phần tử li cho mỗi mục kết quả

const

resultItem

=

document

.

createElement

(

'

li

'

)

// thêm một lớp vào từng mục của kết quả

resultItem

.

classList

.

thêm

(

'

kết quả -item

'

)

// lấy tên của điểm hiện tại của vòng lặp và thêm tên làm văn bản của mục danh sách

const

text

=

document

.

createTextNode

(

người

.

tên

)

// nối văn bản vào mục kết quả

resultItem

.

appendChild

(

văn bản

)

// thêm mục kết quả vào danh sách

list

.

appendChild

(

resultItem

)

}

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Bây giờ, chúng tôi đã viết cách nối kết quả vào trang; chúng tôi cần tập trung vào việc tìm hiểu những gì nên được thêm vào trang.

Nếu chúng tôi quay lại trình nghe sự kiện của mình, chúng tôi đã dừng lại ở vị trí thứ 4.
Chúng ta sẽ gọi “setList ()” và truyền vào mảng người của chúng ta, nhưng không phải toàn bộ mảng. Chúng tôi sẽ lọc qua mảng người và chỉ sử dụng các mục của “người” có giá trị tên bao gồm giá trị của đầu vào tìm kiếm.

  

searchInput

.

addEventListener

(

"

đầu vào

" < / p>

,

(

e

)

= & gt;

{

let

value

=

e

.

target

.

value

if

(

value

& amp; & amp ;

value

.

trim

().

length

& gt;

0

< p class = "p">) {

giá trị

=

giá trị

.

trim

().

toLowerCase

()

// chỉ trả về kết quả của setList nếu giá trị của tìm kiếm được bao gồm trong tên của người đó

setList

(

người

.

filter

(

người

= & gt;

{

return

người

.

name

.

bao gồm

(

giá trị

)

}))

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Hãy kiểm tra điều này, nếu chúng tôi nhập “be” vào thanh tìm kiếm, “becky” sẽ xuất hiện trên trang bên dưới thanh tìm kiếm.

Bạn thấy gì?



Xóa kết quả khỏi Trang

Để xóa kết quả khỏi trang, chúng tôi cần gọi phần tử “danh sách” và xóa từng phần tử con vì hiện tại các mục kết quả của chúng tôi là phần tử con của “danh sách”.

Một cách dễ dàng và nhanh chóng để thực hiện việc này là xóa phần tử con đầu tiên của phần tử mẹ, cho đến khi không còn phần tử nào nữa … chúng ta có thể thực hiện việc này bằng cách sử dụng vòng lặp “while”.

** Vòng lặp While: trong khi điều kiện vẫn đúng, hãy thực hiện hành động được mô tả. **

  

function

clearList

() {< / p>

// lặp qua từng phần tử con của danh sách kết quả tìm kiếm và xóa từng phần tử con

while

(

list

.

firstChild

) {

list

.

removeChild

(

danh sách

.

firstChild

)

}

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Chúng tôi có thể tham chiếu đến hàm này, clearList (), trong trình nghe sự kiện của chúng tôi –

  

searchInput

.

addEventListener

(

"

đầu vào

" < / p>

,

(

e

)

= & gt;

{

// bên trong, chúng ta cần đạt được một số điều sau:

// 1. khai báo và gán giá trị đích của sự kiện cho một biến AKA bất cứ thứ gì được nhập vào thanh tìm kiếm

để

giá trị

=

e

.

target

.

value

// 2. kiểm tra: nếu đầu vào tồn tại và nếu đầu vào lớn hơn 0

if

(

value

& amp; & amp ;

value

.

trim

().

length

& gt;

0

< p class = "p">) {

// 3. xác định lại 'giá trị' để loại trừ khoảng trắng và thay đổi đầu vào thành tất cả chữ thường

giá trị

=

giá trị

.

trim

().

toLowerCase

()

// 4. chỉ trả về kết quả nếu giá trị của tìm kiếm được bao gồm trong tên của người đó

// chúng ta cần viết mã (một hàm để lọc qua dữ liệu của chúng ta để bao gồm giá trị đầu vào tìm kiếm)

}

else

{

// 5. không trả lại gì

clearList

()

}

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

  

clearButton

.

addEventListener

(

"

nhấp vào

" < / p>

,

()

= & gt;

{

clearList

()

})

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình



Không hiển thị kết quả

Chà, chúng ta phải tự hỏi, điều gì sẽ xảy ra nếu giá trị đầu vào không hiển thị phù hợp? ko có kết quả? Chúng tôi cần cho người dùng biết chính xác điều đó!

Hãy xây dựng một hàm có tên “noResults ()”. Hàm này sẽ hiển thị thông báo lỗi trên trang, nơi kết quả sẽ có.

  

function

noResults

() {< / p>

// tạo một phần tử cho lỗi; một mục danh sách ("li")

const

error

=

document

.

createElement

(

'

li

'

)

// thêm tên lớp là "error-message" vào phần tử lỗi của chúng tôi

error

.

classList

.

thêm

(

'

lỗi -message

'

)

// tạo văn bản cho phần tử của chúng ta

const

text

=

document

.

createTextNode

(

'

Không tìm thấy kết quả nào. Xin lỗi!

'

)

// nối văn bản vào phần tử của chúng ta

error

.

appendChild

(

văn bản

)

// thêm lỗi vào phần tử danh sách của chúng tôi

list

.

appendChild

(

lỗi

)

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Chúng tôi có thể sử dụng hàm này trong hàm setList () của chúng tôi:

  

function

setList

(

kết quả

) {

clearList

()

dành cho

(

const

người

trong số

kết quả

) {

const

resultItem

=

document

.

createElement

(

'

li

'

)

resultItem

.

classList

.

thêm

(

'

kết quả -item

'

)

const

text

=

document

.

createTextNode

(

người

.

tên

)

resultItem

.

appendChild

(

văn bản

)

list

.

appendChild

(

resultItem

)

}

if

(

kết quả

.

length

===

0

) {

noResults

()

}

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình



Kiểm tra mã của chúng tôi

Bây giờ, chúng tôi đã có tệp JavaScript và tệp HTML được viết đẹp mắt, được tải với trình xử lý sự kiện, khai báo biến và hàm, chúng tôi có thể kiểm tra mã của mình.

Đi tới trình duyệt của bạn … trong thiết bị đầu cuối của bạn, nhập:

mở index.html

Đây là những gì tôi thấy … Tôi đã thêm tiêu đề và tạo một chút kiểu dáng …

Trường hợp 1: Chưa có đầu vào (chưa)
chưa có đầu vào < / p>

Trường hợp thứ 2: Kết quả!
Hình ảnh mô tả

Trường hợp 3: Không có kết quả phù hợp
Mô tả hình ảnh

Cảm ơn bạn rất nhiều vì đã đọc và viết mã với tôi. Tôi hy vọng bạn đã học được nhiều như tôi có được với dự án JavaScript nhỏ này.

Vui lòng để lại nhận xét, câu hỏi hoặc đề xuất. Chúng ta cùng nhau tiếp tục tìm hiểu nhé.
💭💭💭💭💭💭💭💭💭💭💭💭💭💭💭


Xem thêm những thông tin liên quan đến chủ đề tạo thanh tìm kiếm bằng javascript

02. Chức năng tìm kiếm bằng Javascript.

alt

  • Tác giả: ZoneX Dev
  • Ngày đăng: 2022-03-06
  • Đánh giá: 4 ⭐ ( 2355 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham khảo khoá học FRONT END tại: https://zonexdev.online/
    ➥ Tiktok: https://www.tiktok.com/@thhxxx
    ➥ Facebook Fanpage: https://www.facebook.com/zoneXdev

    javascript htmlcss frontend reactjs

Thực hành CSS với một Form Tìm kiếm

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 6191 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một form tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá bốn cách khác nhau để có thể trang…

Cách tạo Bookmarklet tìm kiếm văn bản bằng JavaScript / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 5 ⭐ ( 4411 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bookmarklets là các ứng dụng JavaScript có thể được truy cập dưới dạng dấu trang của trình duyệt. Chúng được sử dụng để cho phép người dùng thực hiện các hành động khác nhau trên web

Hướng dẫn tạo filter list với Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 5058 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Filter list là một danh sách các kết quả tìm kiếm có thể được lọc lại mỗi khi người dùng nhập vào một kí tự. Chúng ta thường gặp một filter list trong ô tìm.

Tạo Form tìm kiếm đẹp mắt bằng CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 8824 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 20: Tạo bảng có tính năng tìm kiếm với jQuery

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 1705 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, chúng ta sẽ tìm hiểu cách tạo bảng có tính năng tìm kiếm với jQuery. Mình sẽ tham khảo cách làm trên trang w3school nhé.

Bài 50: Tạo trang tìm kiếm với chức năng tự động gợi ý (Auto complete)

  • Tác giả: tedu.com.vn
  • Đánh giá: 4 ⭐ ( 8376 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Sắp xếp bằng PHP - cách sắp xếp mảng trong php

By ads_php