Skip to content

Commit 8d6991e

Browse files
ArathyKumarArathyKumar
committed
chore: Limit number of autocomplete options shown to the user
1 parent 6cf967b commit 8d6991e

File tree

3 files changed

+158
-10
lines changed

3 files changed

+158
-10
lines changed

‎core/pfe-core/controllers/combobox-controller.ts‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -525,19 +525,41 @@ export class ComboboxController<
525525
}
526526

527527
#filterItems() {
528-
if (this.#input) {
529-
let value: string;
530-
for (const item of this.items) {
531-
const hidden =
532-
!!this.options.isExpanded()
533-
&& !!(value = this.options.getComboboxValue(this.#input))
534-
&& this.options.isItemFiltered?.(item, value)
535-
|| false;
536-
this.options.setItemHidden(item, hidden);
528+
if (!this.#input) return;
529+
530+
const value = this.options.getComboboxValue(this.#input);
531+
let filteredOption = 0;
532+
533+
for (const item of this.items) {
534+
const isExpanded = this.options.isExpanded?.() ?? false;
535+
const matchesFilter = this.options.isItemFiltered?.(item, value) ?? false;
536+
537+
// Increment the filtered option list count by 1 to limit the no of options shown
538+
if (!isExpanded || !matchesFilter) {
539+
filteredOption++;
537540
}
541+
542+
// Determine if the item should be hidden
543+
const hidden = (isExpanded && matchesFilter) || filteredOption > 5;
544+
this.options.setItemHidden(item, hidden);
538545
}
539546
}
540547

548+
// Commented the actual function for filter and will be uncommenting this
549+
// #filterItems() {
550+
// if (this.#input) {
551+
// let value: string;
552+
// for (const item of this.items) {
553+
// const hidden =
554+
// !!this.options.isExpanded()
555+
// && !!(value = this.options.getComboboxValue(this.#input))
556+
// && this.options.isItemFiltered?.(item, value)
557+
// || false;
558+
// this.options.setItemHidden(item, hidden);
559+
// }
560+
// }
561+
// }
562+
541563
#onClickButton = () => {
542564
if (!this.options.isExpanded()) {
543565
this.#show();

‎elements/pf-search-input/demo/pf-search-input-autocomplete.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
<div class="container">
22
<h1>Search with autocomplete</h1>
33
<pf-search-input placeholder="Search">
4-
<pf-option value="Alabama"> Alabama </pf-option>
4+
<!-- <pf-option value="Alabama"> Alabama </pf-option>
55
<pf-option value="New Jersey"> New Jersey </pf-option>
66
<pf-option value="New York"> New York </pf-option>
77
<pf-option value="New Mexico"> New Mexico </pf-option>
88
<pf-option value="North Carolina"> North Carolina </pf-option>
9+
<pf-option value="Alabama1"> Alabama 1 </pf-option>
10+
<pf-option value="New Jersey1"> New Jersey 1 </pf-option>
11+
<pf-option value="New York1"> New York 1 </pf-option>
12+
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
13+
<pf-option value="North Carolina1"> North Carolina 1</pf-option>
14+
<pf-option value="Alabama2"> Alabama 2 </pf-option>
15+
<pf-option value="New Jersey2"> New Jersey 2 </pf-option>
16+
<pf-option value="New York2"> New York 2 </pf-option>
17+
<pf-option value="New Mexico2"> New Mexico 2 </pf-option>
18+
<pf-option value="North Carolina2"> North Carolina 2 </pf-option>
19+
<pf-option value="Alabama3"> Alabama 3 </pf-option>
20+
<pf-option value="New Jersey3"> New Jersey 3 </pf-option>
21+
<pf-option value="New York3"> New York 3 </pf-option>
22+
<pf-option value="New Mexico3"> New Mexico 3 </pf-option>
23+
<pf-option value="North Carolina3"> North Carolina 3 </pf-option> -->
924
</pf-search-input>
1025
</div>
1126

‎elements/pf-search-input/pf-search-input.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,104 @@ export class PfSearchInput extends LitElement {
4141
delegatesFocus: true,
4242
};
4343

44+
optionDetails: {
45+
text: string;
46+
value: string;
47+
}[] = [
48+
{
49+
"text": "London",
50+
"value": "london"
51+
},
52+
{
53+
"text": "Paris",
54+
"value": "paris"
55+
},
56+
{
57+
"text": "Tokyo",
58+
"value": "tokyo"
59+
},
60+
{
61+
"text": "New York",
62+
"value": "york"
63+
},
64+
{
65+
"text": "Rome",
66+
"value": "rome"
67+
},
68+
{
69+
"text": "Sydney",
70+
"value": "sydney"
71+
},
72+
{
73+
"text": "Beijing",
74+
"value": "beijing"
75+
},
76+
{
77+
"text": "Dubai",
78+
"value": "dubai"
79+
},
80+
{
81+
"text": "Rio de Janeiro",
82+
"value": "de"
83+
},
84+
{
85+
"text": "Barcelona",
86+
"value": "barcelona"
87+
},
88+
{
89+
"text": "Istanbul",
90+
"value": "istanbul"
91+
},
92+
{
93+
"text": "Cairo",
94+
"value": "cairo"
95+
},
96+
{
97+
"text": "Havana",
98+
"value": "havana"
99+
},
100+
{
101+
"text": "Machu Picchu",
102+
"value": "picchu"
103+
},
104+
{
105+
"text": "The Great Barrier Reef",
106+
"value": "great"
107+
},
108+
{
109+
"text": "The Grand Canyon",
110+
"value": "grand"
111+
},
112+
{
113+
"text": "The Amazon Rainforest",
114+
"value": "amazon"
115+
},
116+
{
117+
"text": "The Great Barrier Reef1",
118+
"value": "great1"
119+
},
120+
{
121+
"text": "The Grand Canyon1",
122+
"value": "grand1"
123+
},
124+
{
125+
"text": "The Amazon Rainforest1",
126+
"value": "amazon1"
127+
},
128+
{
129+
"text": "The Maldives",
130+
"value": "maldives"
131+
},
132+
{
133+
"text": "Iceland",
134+
"value": "iceland"
135+
},
136+
{
137+
"text": "Bora Bora",
138+
"value": "bora"
139+
}
140+
]
141+
44142
/** Accessible label for the select */
45143
@property({ attribute: 'accessible-label' }) accessibleLabel?: string;
46144

@@ -112,6 +210,7 @@ export class PfSearchInput extends LitElement {
112210
connectedCallback(): void {
113211
super.connectedCallback();
114212
document.addEventListener('click', this._onOutsideClick);
213+
this.addOptions(this.optionDetails);
115214
}
116215

117216
disconnectedCallback(): void {
@@ -318,6 +417,18 @@ export class PfSearchInput extends LitElement {
318417
this.value = "";
319418
this._toggleInput!.value = this.value;
320419
}
420+
421+
addOptions(optionData: {
422+
text: string;
423+
value: string;
424+
}[]): void {
425+
const options: PfOption[] = optionData.map(optionDetail => {
426+
const option: PfOption = document.createElement('pf-option');
427+
option.textContent = `${optionDetail.text}`;
428+
return option;
429+
})
430+
this.append(...options);
431+
}
321432
}
322433

323434
declare global {

0 commit comments

Comments
 (0)