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: ashish.dhamala2015@gmail.com 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