JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li><b>No Print</b>..Don't print anything before the following search box</li>
<li><b>No Print</b>..No graphics, Ads or anything else before the search box and its results</li>
</ul>
  <script>
    var autocompleter={};
    $(function() {
        $(document).on("click",".ui-menu-item-wrapper a[target]",function(){
            return false
        })
        $(".autocompleter").each(function() {
            var input = $("input",this);
            var ac=autocompleter[ input.data("using") ];
            if (!ac) throw "autocompleter using '"+input.data("using")+"' is not defined"
            console.log(input.data("using"),ac);
            input.autocomplete({
                minLength: 0,
                source: ac,
                open: function(event, ui) {
                    $(this).autocomplete("widget").position({
                          my: "left top",
                          at: "right+10 top",
                          of: input
                    }) // move it to the side.
                },
                focus: select,
                select: select
            })
            .autocomplete("instance")._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<div>" + item.label + "<br>" + item.desc + "</div>")
                    .appendTo(ul);
            };
        function select(event, ui) {
            $(this).val(ui.item.label);
            $(this).next().html(ui.item.desc);
        }
        })
    });
</script>
<!--  end of required in the head  for all class=autocompleter-->

<script language="JavaScript">
var gAutoPrint = true; // Flag for whether or not to automatically call the print function

function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';

if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}

html += '\n</HE' + 'AD>\n<BODY>\n';

var...

CSS

<style> /* this can go into a css file*/
    .ui-autocomplete-input
    {
     width: 200px;
    }

    .autocomplete-project label
    {
        display: block;
        font-weight: bold;
        font-family: Verdana,Arial,sans-serif;
        font-size: 14px;
        margin-bottom: 1em;
    }

    .autocomplete-project .description
    {
        margin: 0;
        padding: 0;
    }
</style>
  <style> /* this can go into a css file*/
    .ui-autocomplete-input
    {
     width: 175px;
     max-height: 300px;
    }

    .autocomplete-project label
    {
        display: block;
        font-weight: bold;
        font-family: Verdana,Arial,sans-serif;
        font-size: 10px;
        margin-bottom: 1em;
    }

    .autocomplete-project .description
    {
        margin: 0;
        padding: 0;
    }
    .autocomplete-project p, .autocomplete-project label{display:inline}
       .ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        } 
  </style>
<!--  required in the head, only once for all class=autocompleter-->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--  end of required in the head -->
  <style> /* this can go into a css file*/
    .autocompleter label
    {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
    }

    .autocompleter .description
    {
        margin: 0;
        padding: 0;
    }
    .autocompleter p, .autocompleter label{display:inline}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--  end of required in the head...