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 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>
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>