[Vuejs]-How to make autosuggest field look like bootstrap input?

by

1👍

✅

To apply the form-control class to vue-autosuggest‘s inner <input>, as required for the Bootstrap <input> styles, you could use the inputProps prop (automatically applied to the <input>):

<template>
  <vue-autosuggest :input-props="inputProps">
    ...
  </vue-autosuggest>
</template>

<script>
export default {
  data() {
    return {
      inputProps: {
        class: 'form-control',
      }
    }
  }
}
</script>

Interestingly, that class used to be added by default in vue-autosuggest 1.x, but was removed in 2.x.

demo

0👍

You need to modify the the <input> tag of the vue-autosuggest component to include the class form-control from Vue-Bootstrap.

You will not be able to add this class directly to the component as the component wraps the input within a div block. Bootstrap CSS requires the the element to be of type input to properly match the CSS selectors.

If we look here https://github.com/darrenjennings/vue-autosuggest/blob/master/src/Autosuggest.vue at the component itself we see

<input
      :type="internal_inputProps.type"
      :value="internalValue"
      :autocomplete="internal_inputProps.autocomplete"
      :class="[isOpen ? `${componentAttrPrefix}__input--open` : '', internal_inputProps['class']]"
      v-bind="internal_inputProps"
      aria-autocomplete="list"
      :aria-activedescendant="isOpen && currentIndex !== null ? `${componentAttrPrefix}__results-item--${currentIndex}` : ''"
      :aria-controls="`${componentAttrIdAutosuggest}-${componentAttrPrefix}__results`"
      @input="inputHandler"
      @keydown="handleKeyStroke"
      v-on="listeners"
    >

This must be modified in your local version to include the bootstrap class.

Leave a comment