diff --git a/doc/multiselect/BasicDoc.vue b/doc/multiselect/BasicDoc.vue
index 266cdd6c7..c6a81e593 100644
--- a/doc/multiselect/BasicDoc.vue
+++ b/doc/multiselect/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,13 +25,13 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
@@ -56,7 +56,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
diff --git a/doc/multiselect/ChipsDoc.vue b/doc/multiselect/ChipsDoc.vue
index 9c9247f3c..6001823c2 100644
--- a/doc/multiselect/ChipsDoc.vue
+++ b/doc/multiselect/ChipsDoc.vue
@@ -3,7 +3,7 @@
         <p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,13 +22,13 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
+<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
@@ -53,7 +53,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
diff --git a/doc/multiselect/FilledDoc.vue b/doc/multiselect/FilledDoc.vue
index f63372090..17fdaa355 100644
--- a/doc/multiselect/FilledDoc.vue
+++ b/doc/multiselect/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,13 +22,13 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
+<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
@@ -53,7 +53,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
     </div>
 </template>
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 7051a1475..0202968d9 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-20rem">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
     </div>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <FloatLabel class="w-full md:w-20rem">
-    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
+    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
     <label for="ms-cities">MultiSelect</label>
 </FloatLabel>
 `,
@@ -34,7 +34,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-20rem">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
     </div>
@@ -61,7 +61,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <FloatLabel class="w-full md:w-20rem">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
+            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
         </FloatLabel>
     </div>
diff --git a/doc/multiselect/GroupDoc.vue b/doc/multiselect/GroupDoc.vue
index 6e2dca4ed..5f96e7f53 100644
--- a/doc/multiselect/GroupDoc.vue
+++ b/doc/multiselect/GroupDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@@ -57,7 +57,7 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -69,7 +69,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -125,7 +125,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index d93c0eb96..4d8cf1ba3 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,13 +22,13 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
     :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
@@ -53,7 +53,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
             :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
diff --git a/doc/multiselect/TemplateDoc.vue b/doc/multiselect/TemplateDoc.vue
index 31a7ce285..10813b0c3 100644
--- a/doc/multiselect/TemplateDoc.vue
+++ b/doc/multiselect/TemplateDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@@ -42,7 +42,7 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
     <template #option="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -59,7 +59,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -100,7 +100,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+        <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
                 <div class="flex align-items-center">
                     <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index 8749b29c0..ec4cadb7c 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -16,6 +16,7 @@
             optionLabel="label"
             optionValue="value"
             :virtualScrollerOptions="{ itemSize: 44 }"
+            filter
             placeholder="Select Item"
             class="w-full md:w-20rem"
         />
@@ -33,13 +34,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
+    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
     </div>
 </template>
 
@@ -68,7 +69,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
+            @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
     </div>
 </template>