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(‘
}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(‘
}
});
}
}
});
$(“.search_box_options”).show();
}