Search

Vue Bootstrap 5 Search component

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Basic example

A basic example with a simple button.

Edit in sandbox 
        
            
      <template>
        <MDBInput
          inputGroup
          :formOutline="false"
          wrapperClass="mb-3"
          v-model="search1"
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        >
          <MDBBtn color="primary" :ripple="{ color: 'dark' }">
            <MDBIcon icon="search" />
          </MDBBtn>
        </MDBInput>
      </template>
      
        
    
        
            
      <script>
        import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
        import { ref } from 'vue';
        export default {
          components: {
            MDBInput,
            MDBBtn, 
            MDBIcon
          },
          setup() {
            const search1 = ref('');
            return {
              search1,
            };
          },
        };
      </script>

Search event

Here is example how you can make search component with event on it which will fire after clicking on search button.

Edit in sandbox 
        
            
      <template>
        <MDBInput
          inputGroup
          :formOutline="false"
          wrapperClass="mb-3"
          v-model="search2"
        >
          <MDBBtn
            color="primary"
            :ripple="{ color: 'dark' }"
            @click="showAlert"
          >
            <MDBIcon icon="search" />
          </MDBBtn>
        </MDBInput>
      </template>
      
        
    
        
            
      <script>
        import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
        import { ref } from 'vue';
        export default {
          components: {
            MDBInput,
            MDBBtn, 
            MDBIcon
          },
          setup() {
            const search2 = ref('');
            return {
              search2,
            };
          },
        };
      </script>

Autocomplete

By adding extra JS code you can make your search input autocomplete as well.

Learn more about Autocomplete in the Autocomplete Docs

Edit in sandbox 
        
            
      <template>
        <MDBInput
          inputGroup
          v-model="autocompleteBasic"
          :filter="filterBasic"
          style="width: 22rem"
          label="Example label"
        >
          <MDBBtn
            color="primary"
            :ripple="{ color: 'dark' }"
            @click="showAlert"
          >
            <MDBIcon icon="search" />
          </MDBBtn>
        </MDBInput>
      </template>
      
        
    
        
            
      <script>
        import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
        import { ref } from 'vue';
        export default {
          components: {
            MDBInput,
            MDBBtn, 
            MDBIcon
          },
          setup() {
            const autocompleteBasic = ref("");
            const optionsBasic = ref([
              "One",
              "Two",
              "Three",
              "Four",
              "Five",
              "Six",
              "Seven",
              "Eight"
            ]);
            const filterBasic = value => {
              return optionsBasic.value.filter(item => {
                return item.toLowerCase().startsWith(value.toLowerCase());
              });
            };
            return {
              autocompleteBasic,
              filterBasic
            };
          },
        };
      </script>

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs

Edit in sandbox 
        
            
      <template>
        <MDBDropdown v-model="dropdown1">
          <MDBDropdownToggle
            @click="dropdown1 = !dropdown1"
            class="hidden-arrow"
          >
            Dropdown
          </MDBDropdownToggle>
          <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
            <MDBDropdownItem href="#">
              <MDBInput inputGroup label="Search" v-model="search3" />
            </MDBDropdownItem>
            <MDBDropdownItem divider>Action</MDBDropdownItem>
            <MDBDropdownItem href="#">Action</MDBDropdownItem>
            <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
            <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </template>
      
        
    
        
            
      <script>
        import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBInput } from "mdb-vue-ui-kit";
        import { ref } from 'vue';
        export default {
          components: {
            MDBDropdown,
            MDBDropdownToggle,
            MDBDropdownMenu,
            MDBDropdownItem,
            MDBInput
          },
          setup() {
            const dropdown1 = ref(false);
            const search3 = ref(false);
            return {
              dropdown1,
              search3
            }
          }
        };
      </script>