+
-
-
- -
- {{getItemContent(item)}}
-
+
+
+
+
+ -
+ {{getItemContent(item)}}
+
+
+
+
+ -
+ {{getOptionGroupLabel(optionGroup)}}
+
+ -
+ {{getItemContent(item)}}
+
+
+
+
-
-
- -
- {{getOptionGroupLabel(optionGroup)}}
-
- -
- {{getItemContent(item)}}
-
-
-
-
+
@@ -49,6 +53,7 @@ import {ConnectedOverlayScrollHandler,UniqueComponentId,ObjectUtils,DomHandler,Z
import OverlayEventBus from 'primevue/overlayeventbus';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
+import VirtualScroller from 'primevue/virtualscroller';
export default {
name: 'AutoComplete',
@@ -106,13 +111,18 @@ export default {
inputStyle: null,
class: null,
style: null,
- panelClass: null
+ panelClass: null,
+ virtualScrollerOptions: {
+ type: Object,
+ default: null
+ }
},
timeout: null,
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
+ virtualScroller: null,
data() {
return {
searching: false,
@@ -154,6 +164,9 @@ export default {
}
},
methods: {
+ getOptionIndex(index, fn) {
+ return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+ },
getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
},
@@ -529,6 +542,9 @@ export default {
overlayRef(el) {
this.overlay = el;
},
+ virtualScrollerRef(el) {
+ this.virtualScroller = el;
+ },
onOverlayClick(event) {
OverlayEventBus.emit('overlay-click', {
originalEvent: event,
@@ -585,10 +601,14 @@ export default {
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
+ },
+ virtualScrollerDisabled() {
+ return !this.virtualScrollerOptions;
}
},
components: {
- 'Button': Button
+ 'Button': Button,
+ 'VirtualScroller': VirtualScroller
},
directives: {
'ripple': Ripple