Home Bootstrap 5 How to make custom JavaScript advance search?

How to make custom JavaScript advance search?

by therichpost
0 comment
How to make custom JavaScript advance search?

Hello guys how are you? Welcome back to my blog. Today in this blog post, I am going to tell you How to make custom JavaScript advance search?

Working Demo
How to make custom JavaScript advance search?
How to make custom JavaScript advance search?

For More JavaScript’s tutorials.

Guys here is the code snippet and please use carefully:

1. Guys here is the code snippet and you can add into your html file:

<!DOCTYPE html>
<html>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
       
    </style>
    <body>
        <div class="container py-5">
            <form class="row g-3 mb-5">
                <div class="col-auto">
                    <input name="title" class="form-control"  id="title"  placeholder="search by title" />
               </div>
               <div class="col-auto">
                    <input name="actors" class="form-control" id="actors" placeholder="search by actor" />
                </div>
                <div class="col-auto">
                    <input name="genre" class="form-control"  id="genre"  placeholder="search by genre" />
                </div>
                <div class="col-auto">
                    <input type="button" id="search" type="button" class="btn btn-primary" value="search" />
                </div>
                
            </form>
           
            <table class="table">
                <thead>
                  <tr>
                   
                    <th scope="col">Title</th>
                    <th scope="col">Actors</th>
                    <th scope="col">Genre</th>
                  </tr>
                </thead>
                <tbody id="output">
                    <tr>
                        <td>foo</td>
                        <td>jack,jill</td>
                        <td>comedy</td>
                    </tr>
                    <tr>
                        <td>bar</td>
                        <td>jack,jane</td>
                        <td>drama</td>
                    </tr>
                    <tr>
                        <td>baz</td>
                        <td>josh,jane</td>
                        <td>drama</td>
                    </tr>
                    <tr>
                        <td>box</td>
                        <td>jed,regena</td>
                        <td>drama</td>
                    </tr>
                </tbody>
              </table>
        </div>

       

    </body>
    <script>
        const movies = [
            { title: 'foo', actors: ['jack', 'jill'],  genre: 'comedy' },
            { title: 'bar', actors: ['jack', 'jane'],  genre: 'drama' },
            { title: 'baz', actors: ['josh', 'jane'],  genre: 'drama' },
            { title: 'box', actors: ['jed', 'regena'], genre: 'drama' }
            ]
            //filter function
            const filterBy = (prop, value) => movies =>
            value === ''
                ? movies
                : movies.filter(movie => 
                Array.isArray(movie[prop])
                    ? movie[prop].some(x => x === value)
                    : movie[prop] === value
                )
            //set output html    
            const moviesToListItems = movies => 
            movies.map(movie => (
                `<tr>
                <td>${movie.title}</td>
                <td>${movie.actors.join()}</td>
                <td>${movie.genre}</td></tr>
                `
            )).join('')
            //input box filters
            const filterMovies = ({ title, actors, genre }) => movies =>
            [movies]
                .map(filterBy('title', title))
                .map(filterBy('genre', genre))
                .map(filterBy('actors', actors))
                .map(moviesToListItems)
                .pop()
            //get elements
            const el = selector => document.querySelector(selector)
            const search = el('#search')
            const output = el('#output')
            
            //assign output
            const searchMovies = movies => e => {
            output.innerHTML = filterMovies({
                title: el('#title').value,
                actors: el('#actors').value,
                genre: el('#genre').value
            })(movies)
            }

            //search click event
            search.addEventListener('click', searchMovies(movies))
            
    </script>
</html>

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.