How to create a search in the navbar button type?

How to create a search in the navbar button type?
This is my website search html

        <input class="search_field inp" id="search" autocomplete="off" placeholder="Type any word to search from seo tools" style="box-shadow: 0px 0px 8px 7px #ededed" type="text">
        <button class="searc_icon_btn"><span class="fa fa-search color_222"></span></button>
        <div class="search_drop_box" id="index-results">
            <ul></ul>
        </div>
    </div>

please set the below java code for the above HTML code so that it works.

$(“#search_Toggle”).click(function(){
$(“.mobo”).slideToggle(“slow”);
});
$(document).ready(function(){
$(‘#link_tog’).click(function(){
$(‘.search_box_div’).slideToggle();
$(‘.search_box_options’).hide();
$(‘li.lang’).removeClass(‘open’);
});
});
$(function() {
$(‘#link_tog,#top_search’).click(function() {
$(‘#top_search’).focus();
return false;
});
$(document).click(function(e) {
$(‘.search_box_div’).slideUp(500);
$(‘.search_box_options’).slideUp(500);
});
$(‘li.lang’).click(function() {
$(‘.search_box_div’).slideUp(500);
});
});
$(“#top_search”).keyup(function(){ showResults(); });
function clearText(text){
myStr = text.toLowerCase();
myStr = myStr.replace(/ /g,“”);
myStr = myStr.replace(/[^a-zA-Z0-9]+/g,“”);
myStr = myStr.replace(/(\s)+/g, “”);
return myStr;
}
function showResults(){
var val = $(“#top_search”).val().toLowerCase();
$(“.search_box_options”).hide();
if(val.length < 3){$(“.search_box_options”).hide(); return false;}
$.ajax({
url: “link”,
data: ‘keyword=’+val,
dataType: ‘json’,
type: ‘post’,
success: function(result){
$(“.search_box_options”).html(“

    ”);
    var matches = 0;
    if(result == ‘’){
    $(“.search_box_options ul”).append(‘
  • No Result Found…
  • ’);
    }else{
    $.each(result, function(i, item){
    var res = item.title.toLowerCase();
    if (res.match(val)) {
    ++matches;
    var match_html = ‘’ + val + ‘’;
    var match = item.title.toLowerCase().replace(new RegExp(val, “ig”), ‘’ + val + ‘’);
    $(“.search_box_options ul”).append(‘
  • ‘+match+’
  • ’);
    }
    });
    }
    }
    });
    $(“.search_box_options”).show();
    }