Update dropdown/listview on keyup

Hi,

I’m trying to create a dropdown search menu for category selection. What I’d like to happen is the dropdown selection update with each new character the user types in (and not on enter). However, the only way to get the drop down items to update is by pressing enter.

This is obviously a scenario where AJAX is needed, however, I have not been able to get the dropdown menu to show up after an AJAX call has been made. Now, what I’m thinking is the only way, is to reload ‘dropdiv’ using AJAX onkeyup, however, this seems to be excessive. What would be the best way to tackle this?

Here’s my code.




<div id='dropdiv' class='dropdown'>

    

        <?php

        

        $form = ActiveForm::begin(['action' => ['categories'], 'method' => 'get']);


        echo $form->field($newCat, 'cat_name', ['options' => 

                ['data-toggle' => 'dropdown', 

                 'class' => 'dropdown-toggle']])

                ->label('Categories')->input('text', ['autocomplete' => 'off']);


        echo Dropdown::widget([

            'id' => 'test-id',

            'items' => [ ListView::widget([

                    'dataProvider' => $dataProvider,

                    'itemOptions' => ['class' => 'item'],

                    'itemView' => '_catItem',

                    'layout' => '{items}'

                ]),

            ]

        ]);

        

        ActiveForm::end(); 

        


        

        ?>

    </div>

Why don’t you use select2 or autocomplete? There are a few different yii2 widgets for both of them.