JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>33 | balloon Rides Daily (1)</li>
    <li>24 | bicycle (1)</li>
    <li>23 | bicycle trails (1)</li>
</ul>
<form>Search:
    <input type="text" id="searchbar">
    <br>
</form>
<div id="result"></div>

CSS

ul > li {
    list-style-type: none;
}

JavaScript

// Credit Shog9♦ here: 
// http://stackoverflow.com/questions/247023/get-an-array-of-list-element-contents-in-jquery
// Parses the list into an array and changes it's values.
var optionTexts = [];
(function changeAndStoreList(){
    $("ul li").each(function () {
        var regex = /\d+\s\|\s(.*) \(\d+\)/g;
        $(this).text(regex.exec($(this).text())[1]);
        optionTexts.push($(this).text());
    });
}());                   
    
// Search as we type
$('#searchbar').bind('keyup', function (e) {
    document.getElementById("result").innerHTML = "";
    if ($(this).val() !== "") {
        $("#result").text(search($(this).val(), optionTexts));
    }
});

// Simple search funcion
function search(needle, haystack) {
    for (var i = 0; i < haystack.length; i++) {
        if (haystack[i].match(needle)) {
            return haystack[i];
        }
    }
    return false;
}