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.

        
            
          <template>
            <MDBInput
              v-model="search1"
              inputGroup
              :formOutline="false"
              wrapperClass="mb-3"
              placeholder="Search"
              aria-label="Search"
              aria-describedby="button-addon2"
            >
              <MDBBtn color="primary">
                <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>
        
        
    
        
            
          <script setup lang="ts">
            import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
            import { ref } from 'vue';

            const search1 = ref('');
          </script>
        
        
    

Variations

Search comes with plenty of variations. Choose from the following as needed:

  • Search with icon
  • Search with button
  • Search without additional elements

Search with icon

See all the available icons in the Icons Docs.

        
            
              <template>
                <MDBInput
                  v-model="search2"
                  inputGroup
                  :formOutline="false"
                  wrapperClass="mb-3"
                  placeholder="Search"
                  aria-label="Search"
                  aria-describedby="button-addon2"
                >
                  <MDBIcon icon="search" class="align-self-center ms-2" />
                </MDBInput>
              </template>
            
        
    
        
            
              <script>
                import { MDBInput, MDBIcon } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
    
                export default {
                  components: {
                    MDBInput,
                    MDBIcon
                  },
                  setup() {
                    const search2 = ref('');
    
                    return {
                      search2,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBInput, MDBIcon } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';
    
                const search2 = ref('');
              </script>
            
        
    

Search with button

See all the possible input combinations in the Input Group Docs.

        
            
              <template>
                <MDBInput
                  v-model="search3"
                  inputGroup
                  :formOutline="false"
                  wrapperClass="mb-3"
                  placeholder="Search"
                  aria-label="Search"
                  aria-describedby="button-addon2"
                >
                  <MDBBtn outline="primary">Search</MDBBtn>
                </MDBInput>
              </template>
            
        
    
        
            
              <script>
                import { MDBInput, MDBBtn } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBInput,
                    MDBBtn, 
                  },
                  setup() {
                    const search3 = ref('');

                    return {
                      search3,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const search3 = ref('');
              </script>
            
        
    

Search without additional elements

Here is an example of how you can make a search component without any element attached:

        
            
              <template>
                <MDBInput
                  v-model="search4"
                  :formOutline="false"
                  placeholder="Type query"
                  aria-label="Type query"
                  aria-describedby="button-addon2"
                />
              </template>
            
        
    
        
            
              <script>
                import { MDBInput } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBInput,
                  },
                  setup() {
                    const search4 = ref('');

                    return {
                      search4,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBInput } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const search4 = ref('');
              </script>
            
        
    

Search event

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

        
            
            <template>
              <MDBInput
                inputGroup
                :formOutline="false"
                wrapperClass="mb-3"
                v-model="search5"
                placeholder="Search"
                aria-label="Search"
              >
                <MDBBtn color="primary" @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 search5 = ref('');
                  const showAlert = () => alert(search5.value);

                  return {
                    search5,
                    showAlert,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script>
              import { MDBInput, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const search5 = ref('');
              const showAlert = () => alert(search5.value);
            </script>
          
        
    

Autocomplete

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

Learn more about Autocomplete in the Autocomplete Docs

        
            
              <template>
                <MDBAutocomplete
                  v-model="autocompleteBasic1"
                  :filter="filterBasic1"
                  label="Search"
                >
                </MDBAutocomplete>
                <MDBBtn color="primary">
                  <MDBIcon icon="search" />
                </MDBBtn>
              </template>
            
        
    
        
            
              <script>
                import { MDBAutocomplete, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBAutocomplete,
                    MDBBtn,
                    MDBIcon,
                  },
                  setup() {
                    const optionsBasic = ref(["One", "Two", "Three", "Four", "Five"]);
                    const autocompleteBasic1 = ref('');
                    const filterBasic1 = (value: string) => {
                      return optionsBasic.value.filter((item) => {
                        return item.toLowerCase().startsWith(value.toLowerCase());
                      });
                    };

                    return {
                      autocompleteBasic1,
                      filterBasic1,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBAutocomplete, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const optionsBasic = ref(["One", "Two", "Three", "Four", "Five"]);
                const autocompleteBasic1 = ref('');
                const filterBasic1 = (value: string) => {
                  return optionsBasic.value.filter((item) => {
                    return item.toLowerCase().startsWith(value.toLowerCase());
                  });
                };
              </script>
            
        
    

Navbar

Search is easily integrated with plenty of our components such as navbar.

Learn more about Navbar in the Navbar Docs

        
            
              <template>
                <MDBNavbar expand="lg" light bg="light" container>
                  <MDBNavbarBrand href="#">Brand</MDBNavbarBrand>
                  <MDBNavbarToggler
                    target="#navbarSupportedContent"
                    @click="collapse1 = !collapse1"
                  ></MDBNavbarToggler>
                  <MDBCollapse id="navbarSupportedContent" v-model="collapse1">
                    <MDBNavbarNav class="mb-2 mb-lg-0">
                      <MDBNavbarItem to="#" active> Home </MDBNavbarItem>
                      <MDBNavbarItem href="#"> Link </MDBNavbarItem>
                      <MDBNavbarItem>
                        <!-- Navbar dropdown -->
                        <MDBDropdown v-model="dropdown1" class="nav-item">
                          <MDBDropdownToggle
                            tag="a"
                            class="nav-link"
                            @click="dropdown1 = !dropdown1"
                            >Dropdown</MDBDropdownToggle
                          >
                          <MDBDropdownMenu aria-labelledby="dropdownMenuButton">
                            <MDBDropdownItem href="#">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#"
                              >Something else here</MDBDropdownItem
                            >
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavbarItem>
                      <MDBNavbarItem to="#" disabled> Disabled </MDBNavbarItem>
                    </MDBNavbarNav>
                    <!-- Search form -->
                    <form class="d-flex input-group w-auto">
                      <MDBAutocomplete
                        v-model="autocompleteBasic2"
                        :filter="filterBasic2"
                        label="Search"
                      />
                      <MDBBtn outline="primary"> Search </MDBBtn>
                    </form>
                  </MDBCollapse>
                </MDBNavbar>
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBAutocomplete,
                  MDBBtn,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBNavbar,
                  MDBNavbarBrand,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBNavbarNav,
                  MDBNavbarItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBAutocomplete,
                    MDBBtn,
                    MDBDropdown,
                    MDBDropdownToggle,
                    MDBDropdownMenu,
                    MDBDropdownItem,
                    MDBNavbar,
                    MDBNavbarBrand,
                    MDBNavbarToggler,
                    MDBCollapse,
                    MDBNavbarNav,
                    MDBNavbarItem,
                  },
                  setup() {
                    const collapse1 = ref(false);
                    const dropdown1 = ref(false);
                    const optionsBasic = ref(["One", "Two", "Three", "Four", "Five"]);
                    const autocompleteBasic2 = ref('');
                    const filterBasic2 = (value: string) => {
                      return optionsBasic.value.filter((item) => {
                        return item.toLowerCase().startsWith(value.toLowerCase());
                      });
                    };

                    return {
                      collapse1,
                      dropdown1,
                      autocompleteBasic2,
                      filterBasic2,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import {
                  MDBAutocomplete,
                  MDBBtn,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBNavbar,
                  MDBNavbarBrand,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBNavbarNav,
                  MDBNavbarItem,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const collapse1 = ref(false);
                const dropdown1 = ref(false);
                const optionsBasic = ref(["One", "Two", "Three", "Four", "Five"]);
                const autocompleteBasic2 = ref('');
                const filterBasic2 = (value: string) => {
                  return optionsBasic.value.filter((item) => {
                    return item.toLowerCase().startsWith(value.toLowerCase());
                  });
                };
              </script>
            
        
    

Dropdown

Moreover, you can integrate our search with dropdown component

Learn more about Dropdowns in the Dropdowns Docs

        
            
            <template>
              <MDBDropdown v-model="dropdown2">
                <MDBDropdownToggle @click="dropdown2 = !dropdown2">
                  Dropdown
                </MDBDropdownToggle>
                <MDBDropdownMenu filter>
                  <MDBDropdownItem divider />
                  <MDBDropdownItem href="#">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                },
                setup() {
                  const dropdown2 = ref(false);

                  return {
                    dropdown2,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const dropdown2 = ref(false);
            </script>
          
        
    

Datatable

It works perfectly with MDB datatables.

Learn more about Datatables in the Datatables Docs

        
            
              <template>
                <MDBInput class="mb-4" v-model="search7" />
                <MDBDatatable :dataset="dataset" :search="search7" />
              </template>
            
        
    
        
            
              <script>
                import { MDBInput, MDBDatatable } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBInput,
                    MDBDatatable,
                  },
                  setup() {
                    const search7 = ref('');
                    const dataset = {
                      columns: ["Name", "Position", "Office", "Age", "Start date", "Salary"],
                      rows: [
                        [
                          "Tiger Nixon",
                          "System Architect",
                          "Edinburgh",
                          "61",
                          "2011/04/25",
                          "$320,800",
                        ],
                        ["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
                        [
                          "Ashton Cox",
                          "Junior Technical Author",
                          "San Francisco",
                          "66",
                          "2009/01/12",
                          "$86,000",
                        ],
                        [
                          "Cedric Kelly",
                          "Senior Javascript Developer",
                          "Edinburgh",
                          "22",
                          "2012/03/29",
                          "$433,060",
                        ],
                        ["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
                        [
                          "Brielle Williamson",
                          "Integration Specialist",
                          "New York",
                          "61",
                          "2012/12/02",
                          "$372,000",
                        ],
                        [
                          "Herrod Chandler",
                          "Sales Assistant",
                          "San Francisco",
                          "59",
                          "2012/08/06",
                          "$137,500",
                        ],
                        [
                          "Rhona Davidson",
                          "Integration Specialist",
                          "Tokyo",
                          "55",
                          "2010/10/14",
                          "$327,900",
                        ],
                        [
                          "Colleen Hurst",
                          "Javascript Developer",
                          "San Francisco",
                          "39",
                          "2009/09/15",
                          "$205,500",
                        ],
                        [
                          "Sonya Frost",
                          "Software Engineer",
                          "Edinburgh",
                          "23",
                          "2008/12/13",
                          "$103,600",
                        ],
                        ["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
                        [
                          "Quinn Flynn",
                          "Support Lead",
                          "Edinburgh",
                          "22",
                          "2013/03/03",
                          "$342,000",
                        ],
                        [
                          "Charde Marshall",
                          "Regional Director",
                          "San Francisco",
                          "36",
                          "2008/10/16",
                          "$470,600",
                        ],
                        [
                          "Haley Kennedy",
                          "Senior Marketing Designer",
                          "London",
                          "43",
                          "2012/12/18",
                          "$313,500",
                        ],
                      ],
                    };

                    return {
                      search7,
                      dataset,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { MDBInput, MDBDatatable } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const search7 = ref('');
                const dataset = {
                  columns: ["Name", "Position", "Office", "Age", "Start date", "Salary"],
                  rows: [
                    [
                      "Tiger Nixon",
                      "System Architect",
                      "Edinburgh",
                      "61",
                      "2011/04/25",
                      "$320,800",
                    ],
                    ["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
                    [
                      "Ashton Cox",
                      "Junior Technical Author",
                      "San Francisco",
                      "66",
                      "2009/01/12",
                      "$86,000",
                    ],
                    [
                      "Cedric Kelly",
                      "Senior Javascript Developer",
                      "Edinburgh",
                      "22",
                      "2012/03/29",
                      "$433,060",
                    ],
                    ["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
                    [
                      "Brielle Williamson",
                      "Integration Specialist",
                      "New York",
                      "61",
                      "2012/12/02",
                      "$372,000",
                    ],
                    [
                      "Herrod Chandler",
                      "Sales Assistant",
                      "San Francisco",
                      "59",
                      "2012/08/06",
                      "$137,500",
                    ],
                    [
                      "Rhona Davidson",
                      "Integration Specialist",
                      "Tokyo",
                      "55",
                      "2010/10/14",
                      "$327,900",
                    ],
                    [
                      "Colleen Hurst",
                      "Javascript Developer",
                      "San Francisco",
                      "39",
                      "2009/09/15",
                      "$205,500",
                    ],
                    [
                      "Sonya Frost",
                      "Software Engineer",
                      "Edinburgh",
                      "23",
                      "2008/12/13",
                      "$103,600",
                    ],
                    ["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
                    [
                      "Quinn Flynn",
                      "Support Lead",
                      "Edinburgh",
                      "22",
                      "2013/03/03",
                      "$342,000",
                    ],
                    [
                      "Charde Marshall",
                      "Regional Director",
                      "San Francisco",
                      "36",
                      "2008/10/16",
                      "$470,600",
                    ],
                    [
                      "Haley Kennedy",
                      "Senior Marketing Designer",
                      "London",
                      "43",
                      "2012/12/18",
                      "$313,500",
                    ],
                  ],
                };
              </script>
            
        
    

Select

You can also find search option in select input by adding to select attribute data-mdb-filter="true"

Learn more about Select in the Select Docs

        
            
            <template>
              <MDBSelect v-model:options="options" filter />
            </template>
          
        
    
        
            
            <script>
              import { MDBSelect } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBSelect,
                },
                setup() {
                  const options = ref([
                    { text: "One", value: 1 },
                    { text: "Two", value: 2 },
                    { text: "Three", value: 3 },
                    { text: "Four", value: 4 },
                    { text: "Five", value: 5 },
                    { text: "Six", value: 6 },
                    { text: "Seven", value: 7 },
                    { text: "Eight", value: 8 },
                    { text: "Nine", value: 9 },
                    { text: "Ten", value: 10 },
                  ]);

                  return {
                    options,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBSelect } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const options = ref([
                { text: "One", value: 1 },
                { text: "Two", value: 2 },
                { text: "Three", value: 3 },
                { text: "Four", value: 4 },
                { text: "Five", value: 5 },
                { text: "Six", value: 6 },
                { text: "Seven", value: 7 },
                { text: "Eight", value: 8 },
                { text: "Nine", value: 9 },
                { text: "Ten", value: 10 },
              ]);
            </script>
          
        
    

Sidenav

You can create your own search in sidenav. Look in to example below.

Learn more about Sidenav in the Sidenav Docs

        
            
              <template>
                <!-- Sidenav-->
                <MDBSideNav
                  v-model="sidenavScroll"
                  id="sidenavScroll"
                >
                  <div class="text-center">
                    <h3 class="py-4">Examples</h3>
                    <hr class="m-0" />
                  </div>
                  <MDBSideNavMenu scrollContainer filter>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 1</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 2</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 3</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 4</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 5</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 6</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 7</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>
                        <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                        <span>Link 8</span>
                      </MDBSideNavLink>
                    </MDBSideNavItem>
                  </MDBSideNavMenu>
                  <div class="text-center" style="min-height: 3rem">
                    <hr class="mt-0 mb-2" />
                    <small>mdbootstrap.com</small>
                  </div>
                </MDBSideNav>
                <!-- Sidenav-->
              </template>
            
        
    
        
            
              <script>
                import {
                  MDBSideNav,
                  MDBSideNavMenu,
                  MDBSideNavItem,
                  MDBSideNavLink,
                  MDBIcon,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                export default {
                  components: {
                    MDBSideNav,
                    MDBSideNavMenu,
                    MDBSideNavItem,
                    MDBSideNavLink,
                    MDBIcon,
                  },
                  setup() {
                    const sidenavScroll = ref(false);

                    return {
                      sidenavScroll,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import {
                  MDBSideNav,
                  MDBSideNavMenu,
                  MDBSideNavItem,
                  MDBSideNavLink,
                  MDBIcon,
                } from 'mdb-vue-ui-kit';
                import { ref } from 'vue';

                const sidenavScroll = ref(true);
              </script>