搜索表单中的自动完成下拉列表

Question

this is a drop down search n filter field in my search form in which when i click, it shows the whole categories in drop down, however, i want to make this field an autocomplete field in which when a user types some word the taxonomy (category) containing that word automatically comes up.

here is the code from

search-form.php

of that field.

<div class="ebd-directory-subject ebd-search-field">
        <label class="ebd-title-field-lbl"><?php _e('subject', 'everest-business-directory'); ?></label>
        <select name="directory_subject">
            <option value=""><?php _e('Choose Subject', 'everest-business-directory'); ?></option>
            <?php
            $selected_directory_subject = (!empty($_GET[ 'directory_subject' ])) ? intval($_GET[ 'directory_subject' ]) : '';
            $selected_directory_tag = (!empty($_GET[ 'directory_tag' ])) ? intval($_GET[ 'directory_tag' ]) : '';
            $terms = get_terms('subject', array( 'hide_empty' => 0 ));
            $subjectHierarchy = array();
            $ebd_directory_library->sort_terms_hierarchicaly($terms, $subjectHierarchy, 0);

            echo $ebd_directory_library->print_option($subjectHierarchy, array(), 1, '', 'directory_subject', $selected_directory_subject);
            $terms = get_terms('ebd-tags', array( 'hide_empty' => 0 ));
            $subjectHierarchy = array();
            $ebd_directory_library->sort_terms_hierarchicaly($terms, $subjectHierarchy, 0);
            ?>
        </select>
    </div>

i am also attaching pix for more clear explanation : how it looks: how it functions

how i want it to look : how i want it to function

Answer 1

You can use this js plugin to achieve Your goal: https://selectize.github.io/selectize.js/

Or check https://select2.org/.

However for what You want I would recommend first one as select2 can sometimes be really annoying - it's very good plugin but over time I had problems with it when I've used it in wordpress.