how do I create custom WordPress live search?

Question

I have already created a non-live chat search on Wordpress, but I am stuck on how to make a live dropdown search. I aim to achieve this; when one clicks on the search input type, its automatically dropdown the result instead of loading on the same page or displaying the result on a different page.

search.php

<?php
    global $query_string;
    $query_args = explode("&", $query_string);
    $search_query = array();

    foreach($query_args as $key => $string) {
      $query_split = explode("=", $string);
      $search_query[$query_split[0]] = urldecode($query_split[1]);
    } // foreach

    $the_query = new WP_Query($search_query);
    if ( $the_query->have_posts() ) : 
    ?>
    <!-- the loop -->

    <ul>    
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>   
    <?php endwhile; ?>
    </ul>
    <!-- end of the loop -->

    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?> 

index.php

<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
  <input type="search" class="form-control" placeholder="<?php echo esc_attr_x( 'Find Product', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Finding for:', 'label' ) ?>" />
  <button type="submit" role="button" class="btn btn-default right"/><span class="fa fa-search "></span></button>
</form>

functions.php

function searchcreamtask($query) {
    if ($query->is_search && !is_admin() ) {
        if(isset($_GET['post_type'])) {
            $type = $_GET['post_type'];
                if($type == 'book') {
                    $query->set('post_type',array('book'));
                }
        }       
    }
return $query;
}
add_filter('pre_get_posts','searchcreamtask');