JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<div class="alphabet_search_wrap">
    <input type="text" class="search_specialties" placeholder="Type a specialty name..." />
</div>
<ul class="specialties_grid atoz_specialties_grid clearfix" id="search_specialties_results" style="display:none">
    <li class="specialty_item" data-text="acupuncture" style="display: list-item;">Acupuncture</li>
</ul>
<div id="search_specialties_error" class="alert alert_error round" style="display:none">
    <ul>
        <li id="message_text">Sorry, no specialties matched your search.</li>
    </ul>
</div>
<ul class="specialties_grid atoz_specialties_grid clearfix" id="specialty_A">
    <li class="specialty_item" data-text="acupuncture" style="display: list-item;">Acupuncture</li>
    <li class="specialty_item" data-text="addiction medicine" style="display: list-item;">Addiction Medicine</li>
</ul>
<ul class="specialties_grid atoz_specialties_grid clearfix" id="specialty_B">
    <li class="specialty_item" data-text="bacupuncture" style="display: list-item;">Bacupuncture</li>
    <li class="specialty_item" data-text="baddiction medicine" style="display: list-item;">Baddiction Medicine</li>
</ul>

JavaScript

$(document).ready(function () {    
    $('.search_specialties').keyup(function () {

        // Get the query
        var search = $.trim($(this).val()).toLowerCase();
        // Cache the results element & error element
        var $search_specialties_results = $('#search_specialties_results'); 
        var $search_specialties_error = $('#search_specialties_error');
        // Cache the grids and items (other than the results ones)
        var $atoz_grids = $('.atoz_specialties_grid:not(#search_specialties_results)');
        var $specialty_items = $atoz_grids.children('.specialty_item');

        // If query is empty...
        if (search.length == 0) {
            // Empty and hide the results and error.
            $search_specialties_results.empty().hide();
            $search_specialties_error.hide();
            // Show the original grids
            $atoz_grids.fadeIn();
            return;
        }

        // Set up some deferreds for better control
        var fadeGridsDeferred = $.Deferred();
        var determineResultsDeferred = $.Deferred();

        // Hide the original grids
        $atoz_grids.fadeOut('fast', function () {
            fadeGridsDeferred.resolve();
        });

        fadeGridsDeferred.done(function () {
            // Establish a counter for the each loop
            specialty_item_count = 0;
            // Get the total number of items
            specialty_items_total = $specialty_items.length;
            // Loop through items
            $specialty_items.each(function (val, elem) {
                // increment counter
                specialty_item_count++;
                // Get the text of the item
                var this_text = $(this).data('text');
                // Try to get the item within the results
                var $this_result_item = $search_specialties_results.children('li[data-text="' + this_text + '"]');
                // Store whether it exists or not
                var this_result_item_exists =...