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

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

Tags:Javascript