Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; COUNT_CLASS has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/functions.php on line 1713

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; sidebar_generator has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/plugins/multiple_sidebars.php on line 29

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_video_widgets has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/video.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_soundcloud has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/soundcloud.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_counter_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-counter.php on line 9

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_news_in_pic has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/new-in-pic.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Flickr_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/flickr.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_fb_likebox has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/fb.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_google_follow has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/google-follow.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_popular has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/popular-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_recent_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/recent-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_cate_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/category-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; tabs_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/tabs.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_youtube_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/youtube-subscribe.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_social_links has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-links.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_comments_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/comments.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_author_bio has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/bio-author.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_login has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/login.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_search_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/search.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_120_600_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads120.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_125_125_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads125.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_250_250_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads250.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_300_300_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads300.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_tweets_load has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/twittes.php on line 10

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; feedburner_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/newsletter.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_related has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/related.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_slider has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/slider.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_top_rate has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/top-review.php on line 6
JavaScript DOM Tutorial #16 – Custom Search Filter | D4mations.com
  • Thursday , 25 April 2019

JavaScript DOM Tutorial #16 – Custom Search Filter

Code Canyon



Hey gang, in this JavaScript DOM tutorial I’ll show you how we can create a custom JS search filter using the ‘keyup’ event as well as several other techniques we’ve learnt so far in the series.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial

———————————————————————————————
Other tutorials:

—– JAVASCRIPT FOR BEGINNERS:

—– CSS FOR BEGINNERS:

—– NODE.JS TUTORIALS

—– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source

3d Ocean

Related Posts

26 Comments

  1. Lojalinfini Lojalinfini
    March 25, 2019 at 04:10

    /*filter books
    const searchBar = document.forms['search-books'].querySelector('input'); //<input> tag içeriğini searchBar a atadı
    searchBar.addEventListener('keyup', function(e){
    const term = e.target.value.toLowerCase();
    const books = list.getElementsByTagName('li');
    Array.from(books).forEach(function(book){
    const title = book.firstElementChild.textContent;
    if(title.toLowerCase().indexOf(term)!= 1){
    book.style.display = 'block';
    }
    else {
    book.style.display = 'none';
    }
    })
    })
    */

    On github if(title.toLowerCase().indexOf(term)!= 1) part was written as if(title.toLowerCase().indexOf(e.target.value)!= 1) and that code does't give us the correct result if we
    use UPPERCASE in searchbar

  2. Inclined scorpio
    March 25, 2019 at 04:10

    where to use const and where var ????

  3. Ngân Nguyễn
    March 25, 2019 at 04:10

    Can I replace the <li> tag with the <div> tag?

  4. Aman Ansari
    March 25, 2019 at 04:10

    Thanks net ninja for giving so much back to the community with your tutorials.

  5. Gili Yoffe
    March 25, 2019 at 04:10

    Thank you for the tutorial and in case anybody else wants the code:
    // filter books

    const searchBar = document.forms['search-books'].queryselector('input');

    searchBar.addEventListener('keyup', function(e){

    const term = e.target.value.toLowerCase();

    const books = list.getElementsByTagName('li');

    Array.from(books).forEach(function(book){

    const title = book.firstElementChild.text.Content;

    if (title.toLowerCase().indexOf(term) != -1) {

    book.style.disply = 'block';

    } else {

    book.style.disply = 'none';

    }

    })

    })

  6. Noor mohammed
    March 25, 2019 at 04:10

    can i get the code

  7. Mark Balazo
    March 25, 2019 at 04:10

    This is just so cool! Thank man!

  8. Elia
    March 25, 2019 at 04:10

    You are incredible. Udemy is so not needed.

  9. Stefania Iaquinta
    March 25, 2019 at 04:10

    Amazing! You are a genius! Thank you !

  10. bobobo boboboo
    March 25, 2019 at 04:10

    mooooooooooooooooooooooooooooooooooarrr
    please

  11. Aquib B
    March 25, 2019 at 04:10

    I like this video, and I am trying to do the same but there was as error:
    "Uncaught ReferenceError: list is not defined at HTMLInputElement.<anonymous>"

    Is it possible to see your HTML file or can you give me the solution

  12. Kamyar Raza
    March 25, 2019 at 04:10

    Wow Man !! , Great tutorial Thank you …

  13. Aashu ji
    March 25, 2019 at 04:10

    I became you fan after watching these dom element videos in javascript thanks alot

  14. Aashu ji
    March 25, 2019 at 04:10

    you are great ninja

  15. Justin Lane
    March 25, 2019 at 04:10

    Thank you Net Ninja !

  16. Dev Eagle
    March 25, 2019 at 04:10

    Wow, this is better than the majority of videos I buy on Udemy. With the explosion of JavaScript, and most employers wanting “Vanilla JS”, I’ve been searching for good, quality Vanilla JS videos. The topic/project here is amazing. Please post more project-based JavaScript videos like these! Your teaching style is amazing!

  17. Alvi Ayubov
    March 25, 2019 at 04:10

    .includes() will be little bit more concisely and semantically correct than .indexOf()
    Big thx for this tutor!

  18. SapBroSup
    March 25, 2019 at 04:10

    how come all the ‘li’ is being displayed back once you delete everything in the form field? wouldn’t that be an empty ‘term’ const and not be an index of any of the titles?

    thanks ninja you are an excellent teacher.

  19. lardosian
    March 25, 2019 at 04:10

    Tutorial Series wa Subarashi deshta, arigato gozaimashita Net Ninja san!

  20. Ws Webus
    March 25, 2019 at 04:10

    I think it'll be better if you'll cache DOM elements. It's not god idea to search LI tags over and over again on 'keyup' event. (line 51)
    Much better will be to make array from LI.textContent and loop through array

  21. Erdem S
    March 25, 2019 at 04:10

    awesome!
    will you do tutorials about back-end? oh that would be lovely 😀

  22. BungyLaces70.3
    March 25, 2019 at 04:10

    Nice one

  23. Ionut Marian
    March 25, 2019 at 04:10

    Awesome… thanks alot 👍

  24. Wira Andhika
    March 25, 2019 at 04:10

    awesome, thank you so much.
    anyway, is it possible to make the list have pagination by javascript only without server side language?
    i was wondering if we could set the maximum list by 5 for the books to read lists, and then when user add the new book to the lists it will automatically listing to new div/section of page 2 but still in the same html. so it wouldnt make a very long list to scroll.

    May God Bless you for your kindness share knowledge.
    have good day

  25. Morie Henry Hossana Kormoh
    March 25, 2019 at 04:10

    I loved been with u guys, you're the best.
    pls can u make a series on online billing system.

  26. ABC XYZ
    March 25, 2019 at 04:10

    You are god!!!

Leave A Comment

You must be logged in to post a comment.