I need to develop a search functionality similar to the one found on . This search should allow users to select options from a dropdown menu or type their own search query, and provide live search results. I attempted to use the jQuery plugin https://www.jqueryscript.net/form/Multiple-Select-UI-jQuery.html to create a list effect, but it only displayed the results in a div container. When I tried using an input field instead, it caused issues with the live search feature.
Is there any other jQuery plugin that can assist me in achieving this goal?
<div class="custom-result-section test" placeholder="Find Your Test" > </div>
<button class="tg-btn" type="submit"><i class="lnr lnr-magnifier"></i></button>
</fieldset>
<div class="div_search_box drop-down" style="display: none;">
<span class="cross remove-icon "><img src="images/remove-icon.png" height="50px" width="50px"></span>
<div class="jquery-multiple-select style="float:left;margin-right:50px;" >
<ul>
<?php foreach($featured_test as $faetur){ ?>
<li data-test-id="<?php echo $faetur['id']; ?>" ><?php echo $faetur['name']; ?></li>
<?php } ?>
</ul>
</div>
<div class="jquery-multiple-select " style="float:right;margin-right:30px;">
<ul>
<?php foreach($labbogy_health_pkg as $faetur){ ?>
<li data-pkg-id="<?php echo $faetur['id']; ?>"><?php echo $faetur['name']; ?></li>
<?php } ?>
</ul>
</div>
</div>
script
$(".custom-result-section").on('click', function(){
$('.div_search_box').css('display','block');
});
$(".cross").on('click', function(){
$('.div_search_box').css('display','none');
});
// added the ability to edit the div content
$('.custom-result-section').each(function(){
this.contentEditable = true;
});