Create Simple Search Functionality With Up and Down Keys Support Using AlpineJs

Here, we will be looking at how to create a search functionality using alpine js with up and down keyboard click support. You can use up and down keys to navigate the items after search and click enter to take you to the selected item page. Also clicking outside the searched item and escape key will close the dropdown list.

====================== Support ======================

If you want me to continue making this kind of video for free on YouTube, then you can help me financially by sending a few bucks to my Wise (https://wise.com/invite/u/ashishd233) account in Nepalese ?? currency.

My Wise email: [email protected]

If you decide to support me, please send me your Twitter handle in the mail so that I can shout out about you.

====================== Social Media Links ======================

Let's be friends
https://www.instagram.com/aashish_dhamala/


====================== Video Related Links ======================

GitHub Repo
https://github.com/Laratipsofficial/tips-and-tricks/tree/search-functionality-using-alpinejs

AlpineJs Docs
https://alpinejs.dev/start-here

Javascript Scroll Into View Docs
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView


====================== Other Videos ======================

New In Laravel Playlist
https://www.youtube.com/playlist?list=PL2DahmvUpeuu4UVWrcxlvVkMiI0SeS2OZ

Laravel Package Development Playlist
https://www.youtube.com/playlist?list=PL2DahmvUpeuu8HkpbNT-cKernolVdqZq_

Password Validation In Laravel with at least one Letters, Numbers, Upper and Lowercase or Symbols:
https://youtu.be/f-g3P9imPZs

Multiple Apis With ForwardsCalls Trait And Code Refactoring Tip - Laravel Hidden Feature:
https://youtu.be/vzgNm86ezWE

Laravel Chunking - You Might Be Doing This Wrong - Problem and Solution:
https://youtu.be/aQCHmB4Uh0Q

Laravel Tip - Properly Get Data Between Two Dates
https://youtu.be/bJkEBTg1NGA

Get Data From Multiple Databases In One Project | Laravel Tip
https://youtu.be/KJAXLf78QPs


========= Theme and Font Used =========

Theme:
Cobalt2 Theme Official (https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)

Font:
JetBrains Mono (https://www.jetbrains.com/lp/mono/)


====================== Tech stack ======================

Laravel
Javascript
Alpinejs

#javascript #alpinejs #laratips