Выпадающее меню с автозаполнением + статические значения

Question

Я хочу создать выпадающий список, когда вы нажимаете на значок, где вы можете искать данные. Я Поясним это изображение:

Вы можете ввести свое имя викторины на .... правило. Затем во второй части dropdwon вы увидите викторины из базы данных в зависимости от условий поиска.

В третьей части раскрывающегося списка я хочу показать последние 5 опросов (это должно быть статичным, а не чередованием при изменении условий поиска).

В четвертой части раскрывающегося списка я также хочу показать статические значения.

Это можно сделать с select2.js? Или может кто-нибудь помочь мне начать с этого? На самом деле, я не знаю, как начать с этого. Я знаю, как вы можете показывать данные в соответствии с условиями поиска. Но это третья и четвертая часть раскрывающегося списка, что я действительно не знаю, как показать также под ней ...

Answer 1

вы можете использовать любой раскрывающийся список api, но если вы хотите автозаполнять статическим значением, вы должны использовать форму html5 элемент "<datalist >"

здесь пример

<form action="demo_form.asp" method="get"> 
<input list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 
<input type="submit"> 
</form>