JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br>
<div class="autocompleter">
    <script>autocompleter.addins = [{
        value: "sometimes",
        label: "Sometimes",
        desc: " stuff to addin",
    }, {
        value: "maybe",
        label: "Maybe",
        desc: " change or addin data",
    }, {
        value: "printable",
        label: "Printable",
        desc: " Put this autocomplete within the printable autocomplete.",
    }];
    </script>
    <label>Select an add-in:
        <input type=search placeholder="&#x1f50d; add in" name="addins" data-using="addins">
    <label>
    <p class="description">&nbsp;</p>
 </div>

CSS

<!--  required in the head, only once -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style> /* this can go into a css file*/
	.ui-autocomplete-input {
		width: 200x;
	}
	.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;
	}
	.ui-autocomplete-input {
		width: 200px;
		max-height: 200px;
	}
	.autocomplete-project p, .autocomplete-project label {
		display: inline
	}
	.ui-autocomplete {
		max-height: 250px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	.autocompleter p,
	.autocompleter label {
		display: inline
	}
	.description {
		margin: 10px 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>
  <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:...