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: "3243234234324ия",
        label: "мультфильм рождественская история",
        desc: "мультфильм рождественская история",
        icon: "cristmas.jpg"
    },
     {
        value: "лллллллллллллллллллллля",
        label: "лллллллллллллллллллллллллллория",
        desc: "млллллллллллллллллллллллллллория",
        icon: "cristmas.jpg"
    },               
                    
     {
        value: "ллллллл",
        label: "лллллллллллллллллллллллллллл",
        desc: "2лллллллллллллллллллл",
        icon: "cristmas.jpg"
    },               
                    
                    
        {
        value: "лллллллллллллллллллл",
        label: "лллллллллллллллллллллиод",
        desc: "млллллллллллллллллллллллллллд",
        icon: "lp.jpg"
    }, {
        value: "simpsoni",
        label: "симпсоны",
        desc: "описание, описание, описание...",
        icon: "simpsoni.jpg"
    }];

    $("#myinput").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var term = $.trim(request.term);
            var reg = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
            if (term !== "") {
                response($.grep(projects, function(tag) {
                    return...