How to remove the search function and replace it with auto-suggestion function?

Hello!

Here’s what i would like to do. I would like to remove the search function (which is standard) and replace it with an Ajax Auto-Suggestion function – I believe that would be more convenient for my readers.

Here’s the link: https://woork.blogspot.com/2009/02/useful-ajax-auto-suggest-scripts.html and here’s the info: https://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

I am interested in the first option (Ajax Auto Suggestion V.2) – here’s my search.php codes

<?php global $options; ?>
<?php get_header(); ?>

<div id="column">

<?php if (have_posts()) : ?>
<div class="news">

<h1>Search Results</h1>

	<?php while (have_posts()) : the_post(); $i; ?>
	<div id="post-<?php the_ID(); ?>" class="news_i">
	<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
	<div class="date"><?php print POSTED; ?> <?php print ON_TEXT; ?> <?php the_time('d M Y'); ?> <?php print AT_TEXT; ?> <?php the_time('g:ia'); ?></div>
	<div class="summary"><?php no_image_in_post(); ?></div>
	<div class="continue"><p><a href="<?php the_permalink(); ?>"><?php print READ_MORE; ?></a></p></div>
	<div class="perm"><a href="<?php the_permalink(); ?>" rel="bookmark"><strong><?php print PERMALINK; ?></strong></a><?php the_tags('&nbsp;&nbsp;|&nbsp;&nbsp;'.TAGGED_WITH.': ', ', ', ''); ?></div>
	<div class="sharingb"><div class="sharing"><span class="post-to"><?php print POST_TO; ?>:</span><?php social_bookmarks(); ?><?php if(function_exists('wp_email')) { email_link(); } ?><div class="clear"></div></div><div class="clear"></div></div>
	<div class="clear"></div></div>
	<?php endwhile; ?>

<div class="navi">
<div class="navi_left"><?php previous_posts_link('&laquo; '.PREVIOUS_PAGE); ?></div>
<div class="navi_right"><?php next_posts_link(NEXT_PAGE.' &raquo;'); ?></div><div class="clear"></div>
</div>

</div>
<?php else : ?>
<?php endif; ?>

<div class="nRight">

<?php popular_posts('prefix=<div class="top_readsn"><h5>TOP <span class="s">FIVE</span> Most Viewed Posts</h5><ul>&suffix=</ul></div>&limit=5&output_template=<li><div class="pic"><a href="{url}" title="{title}">{php:ThumbById({postid});}</a></div><div><h6><a href="{url}" title="{title}">{title}</a></h6></div><div class="clear"></div></li>&no_text=true'); ?>

<?php if ($options['adblock3'] != '') : ?>
<div class="ad_box marginfv"><?php print ADVERTISEMENT; ?><?php echo $options['adblock3']; ?></div>
<?php endif; ?>

<div class="subscribe marginfv">
<p><?php print CAN_SUBSCRIBE; ?> <?php print TO_TEXT; ?> <strong><?php bloginfo('name'); ?></strong> <?php print SUBSCRIBE; ?> <b><?php print SIGN_UP; ?></b>!</p>
<form action="https://feedburner.google.com/fb/a/mailverify?uri=<?php echo $options['feedburner']?>" method="post" class="fe">
<fieldset>
<input type="text" name="email" value="<?php print YOUR_EMAIL; ?>" class="email" />
<input type="hidden" value="<?php echo $options['feedburner']?>" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Sign Up" class="bu" />
</fieldset>
</form>
</div>

<?php $showpost = new WP_query(); $showpost->query('showposts=5&orderby=rand'); ?>
<?php if ($showpost->have_posts()) : ?>
<h2><?php print MORE_POSTS; ?></h2>
<ul class="random_posts">
	<?php while ($showpost->have_posts()) : $showpost->the_post(); ?>
	<li>
	<div class="thumb"><?php show_thumb($options['big_thumb_w'],$options['big_thumb_h'],$options['crop'],$options['quality']); ?></div>
	<div class="heading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
	<div class="clear"></div>
	</li>
	<?php endwhile; ?>
</ul>
<?php endif; ?>

<h2><?php print NEWS_ARCHIVE; ?></h2>
<?php get_calendar(false); ?>

</div>

<div class="clear"></div>
</div>

<?php get_footer(); ?>