D4mations.com

JavaScript DOM Tutorial #16 – Custom Search Filter



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

d4mer

, , , , , , , , , , ,

26 responses to “JavaScript DOM Tutorial #16 – Custom Search Filter”

  1. /*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

  5. 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';

    }

    })

    })

  11. 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

  16. 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!

  18. 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.

  20. 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

  24. 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

Leave a Reply