'How the create autocomplete input from dropdown list?

I created a WordPress PHP plugin for my website. I listed all the companies in a dropdown list.

But I want to change it.,

I want to create a text input field with autocomplete feature. It should complete itself with the companies in the dropdown list.

I searched for it but I beginner in PHP and I cannot find any solution.

<?php



function mytheme_enqueue_custom_scripts()
{
    wp_enqueue_style('selectize-css', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css');
    wp_enqueue_script('jquery-js-341', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
    wp_enqueue_script('selectize-js', 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js');

}

add_action('wp_enqueue_scripts', 'mytheme_enqueue_custom_scripts');

function wp_my_company_search()
{
    $url = 'https://api.mycomp.com/widget/company';

    $response = wp_remote_get($url);

    try {
        $companys = json_decode($response['body']);
    } catch (Exception $ex) {
        $companys = null;
    }

    ?>

    <div class="vc_column_container " style="margin-left:100px">
        <div class="vc_row">
            <div class="vc_col-sm-10">
                <select class="form-input company-seletion sfiltreselect">
                    <option value="" style="font-family: 'Exo'">Companies</option>
                    <?php foreach ($companys as $company) { ?>
                        <option value="<?php echo $company->code; ?>"><?php echo $company->name; ?> (<?php echo $company->code; ?>)</option>
                    <?php } ?>
                </select>
            </div>
            <div class="vc_col-sm-2 ">
                <a href="#" class="button btn-category-search " style="border-radius:4px; background-color:#72B886"><i class="fas fa-search" style="font-size:20px; text-align:center; color:white"></i></a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('select').selectize({
                sortField: 'text'
            });
        });

        var companySelect = document.getElementsByClassName("company-seletion")[0];

        companySelect.selectedIndex = 0;

        window.addEventListener('beforeunload', function () {
            companySelect.selectedIndex = 0;
        });

      

    </script>

    <?php
}

add_shortcode('my-Company-Search', 'wp_my_company_search');


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source