JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="CapitalHeader">
        <div class="Wood_Block input_1st"> </div>
        
        <div class="Wood_Block input_2"></div>
    </div>
    <form>

        <div class="serch_fild_block">
            <input id="myinput" type="text" class="form-control" placeholder="Введите слово для поиска" name="phone" required/>
            <button id="serch" type="button" class="mybutton" required="">ИСКАТЬ</button>
        </div>




        </div>
        <div class="form-controls">
            <input type="button" class="mybutton" data-paste="1" value="1" />
            <input type="button" class="mybutton" data-paste="2" value="2" />
            <input type="button" class="mybutton" data-paste="3" value="3" />
            <input type="button" class="mybutton" data-paste="4" value="4" />
            <input type="button" class="mybutton" data-paste="5" value="5" />
            <input type="button" class="mybutton" data-paste="6" value="6" />
            <input type="button" class="mybutton" data-paste="7" value="7" />
            <input type="button" class="mybutton" data-paste="8" value="8" />
            <input type="button" class="mybutton" data-paste="9" value="9" />
            <input type="button" class="mybutton" data-paste="0" value="0" />
            <input type="button" class="mybutton delite" onclick="del()" data-paste="" value="←" />
            </br>


            <input type="button" class="mybutton" data-paste="й" value="й" />
            <input type="button" class="mybutton" data-paste="ц" value="ц" />
            <input type="button" class="mybutton" data-paste="у" value="у" />
            <input type="button" class="mybutton" data-paste="к" value="к" />
            <input type="button" class="mybutton" data-paste="е" value="е" />
            <input type="button" class="mybutton" data-paste="н"...

JavaScript

$(document).ready(function() {

       

        $('.mybutton').on('click', function() {
            var Paste = $(this).data('paste');
            $('#myinput').val($('#myinput').val() + Paste);
        });
   

    
    var projects = [{
        value: "shrek",
        label: "шрек, шрек",
        desc: "мультфильм шрек 2",
        icon: "shrek.jpg"
    }, {
        value: "рождественская история",
        label: "мультфильм рождественская история",
        desc: "мультфильм рождественская история",
        icon: "cristmas.jpg"
    },
    {
        value: "рождественская история",
        label: "мультфильм рождественская история",
        desc: "мультфильм рождественская история",
        icon: "cristmas.jpg"
    },
    {
        value: "wrfewrfwerfwerf",
        label: "rfwe рождеwrefwerfственская истrefwerfория",
        desc: "мультфwrfwefильм рождеwerfwrefственская истоwefwerfрия",
        icon: "wrefwerfwerf"
    },
    {
        value: "fwerfwerfwerfwerfwerfwerf",
        label: "wrefwrefwerfрия",
        desc: "муfwerfwerfwerfwerfwerfория",
        icon: "cristmas.jpg"
    },                                                  
    {
        value: "лfwrfwerfwwqweqwererrefwrfд",
        label: "мулwrefwrefwrefwerfиод",
        desc: "мульfwrefwerfwrfrefcdcdод",
        icon: "lp.jpg"
    }, {
        value: "simpsoni",
        label: "симпсоны",
        desc: "описание, описание, описание...",
        icon: "simpsoni.jpg"
    }];

    $("#myinput").autocomplete({
        minLength: 0,
        source: projects,
        focus: function (event, ui) {
            $("#myinput").val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            $("#myinput").val(ui.item.label);
            $("#myinput-id").val(ui.item.value);
            $("#myinput-description").html(ui.item.desc);
            $("#myinput-icon").fadeOut('slow', function () {
                $(this).attr("src", "images/" + ui.item.icon).fadeIn('slow');
  ...