Как создать редактируемый ввод с выпадающим списком в bootstrap? - PullRequest
Новая
       6

Как создать редактируемый ввод с выпадающим списком в bootstrap?

0 голосов
/ 13 марта 2020

Я хочу создать такой же элемент управления в Quickbooks Online:

Quickbooks category dropdown

Когда пользователь помещает курсор в поле, выпадающий список открывается. По мере ввода пользователем система автоматически заполняет соответствующий текст. Список фильтруется вниз, чтобы соответствовать префиксу. Если пользователь вводит что-то, что не соответствует списку, список фильтруется до одной записи: «+ Добавить [введенный текст здесь]».

Я использую BootstrapVue, но я мог бы сделать это прямо Bootstrap, если необходимо.

Используя BootstrapVue, этот вид приближается : 

<b-input-group size="sm">
  <b-form-input
    placeholder="Select matching item"
    v-model="colname"
  ></b-form-input>
  <template #append>
    <b-dropdown size="sm">
      <b-dropdown-item
        v-for="item in items"
        v-bind:key="item.id"
        @click.prevent="choose(item)"
        >{{ item.itemname }}
      </b-dropdown-item>
    </b-dropdown>
  </template>
</b-input-group>

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

Я пробовал Chosen и Select2, но они приносят множество других проблем.

Любые предложения о том, как go об этом?

...