JSFiddle - React, Tailwind, and code Playground

by Tim BĂĽthe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<p>Some text goes here</p>
<span class="my-autocomplete">
    <input type="text" class="my-autocomplete-input">
    <span class="my-autocomplete-button" style="margin-left:-7px; height: 20px;"></span>
</span>
<p>Even more text goes here</p>
<span class="my-autocomplete">
    <input type="text" class="my-autocomplete-input">
    <span class="my-autocomplete-button" style="margin-left:-7px; height: 20px;"></span>
</span>

CSS

.my-autocomplete-button {
    top:6px;
}

JavaScript

$('.my-autocomplete').each(function(){
    
    var $testinput = $(this).find('.my-autocomplete-input');
    var $testinputButton = $(this).find('.my-autocomplete-button');

    $testinput.autocomplete({
        minLength: 0,
        autoFocus: true,
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] 
      });
    

    $testinputButton
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass("ui-corner-all")
        .addClass("ui-corner-right ui-button-icon ui-autocomplete-button")
        .click(function(){
            $testinput.autocomplete("search");
        });
});