JSFiddle - React, Tailwind, and code Playground

HTML

<form class="ui-filterable">
    <input data-type="search" id="main-list-filter" placeholder="Listede ara..." />
</form>

<ul data-role="listview" id="main-list" data-filter="true" data-input="#main-list-filter"> 
    <li data-icon="false">
        
        <a href="#">
            <h2>Abercrombie</h2>
        </a>
        
    </li>
    <li data-icon="false"><a href="#">
        <h2>Benetton</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>CalvinKlein</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>Converse</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>Diesel</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>Fred Perry</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>Gucci</h2>
        </a>
    </li>
    <li data-icon="false"><a href="#">
        <h2>Lacoste</h2>
        </a>
    </li>
</ul>

JavaScript

$(document).ready(function(){

    $("#main-list").on("filterablefilter", function(event, ui) {
                    alert("yakaladım");
                });
    
});