Filter by Ajax Calls

[Andrea Durando]

Hi all,

is there a way after a keypress in the autocomplete to update the datasource using an jaaxcall (like this topic, https://www.htmlelements.com/forums/topic/drop-down-list-with-on-demand-ajax-calls/ but using the autcomplete option and not the filter option),
i try to update it on the ngModelChange, the datasource is upodated, but the input will be resetted eachtime

• This topic was modified 1 year, 9 months ago by Andrea Durando.

[ivanpeevski]

Hi Andrea,

The functionality in comboBox works in the exact same way as in the topic you shared.

Here is an example how to implement it in Angular: stackblitz

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[Andrea Durando]

Thank you for you response.
Is there a away to execute the ajax call to populate the datasource during the loading of the component

[ivanpeevski]

Hi Andrea,

 

Since ajax calls are asynchronous, the component will always load before receiving the response from the ajax call. They will load at the same time only if dataSource is a static array.

If dataSource is set to a function, like in the example I shared, it should be set in the ngAfterViewInit() function.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[Andrea Durando]

Hi Ivanpeevski, that’s clear,
but, apologise me I think I didn’t explain my trouble well,
my question is how can I trigger the callback function to have pre-populate the dropdown elements, and also it should be used when I go to modify it.
I try to move it in ngAfterViewInit as you suggest

`ngAfterViewInit(): void { this.combobox.dataSource = (query: string, callback: (val:ComboType[])=>void): void => {
this.combobox.displayLoadingIndicator = true;
if(this.inputParams.dataSource) {
this.inputParams.dataSource.filter((item) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const valLabel: any = item[this.inputParams.labelField as keyof typeof item];
return valLabel.includes(query);
});
}
else {
let queryString: HttpParams = new HttpParams();
if(query.length > 0) {
queryString = queryString.append(“filter”, ${this.inputParams.labelField}@=${query})
}
this.sysService.getComboBox<ComboType[]>(/${this.inputParams.comboUrl}, queryString).subscribe((response: HttpResponse<ComboType[]>) => {
this.combobox.displayLoadingIndicator = false;
callback((response.body ?? []));
})
}
}
}

But do not fix my issue,

[Steven Peterson]

Hi,

As my colleague said if you want to use the dataSource function to access the query, it should be set in the ngAfterViewInit because the combo box must have been initialized. To prepopulate the dropdown with some values you can set a static dataSource which will be later changed.

An example here: https://stackblitz.com/edit/github-eefp9l-ocobvf?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

If this does not help, please do not hesitate to contact us and explain further!

Best Regards,
Steven Peterson

Smart UI Team
https://www.htmlelements.com/

[Andrea Durando]

Hi Steven,
I tried to use the solution that you suggested, but it do not work ( the function overwrite the list and I do not see any values, that’s aappen also in ythe example taht you linked to me).
The callback function work great, but now i need in some way to inizialize the list in some way using the API.
Is there a way to trigger it manually?

[svetoslav_borislavov]

Hi,

Insert the default values after setting the dataSource.
Here is the modified version: https://stackblitz.com/edit/github-eefp9l-nzupc5?file=src/app/app.component.ts

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Andrea Durando]

Hi thanks for the support

It work the inital load,

I try to set the minLength to 0 to make always the search also when i remove all chars,  but i notice that the function of the datasource is not triggered, is that right?

For now i try to redo the same thing when i Load the component
<div>
<div>I do a clear of selection and the list of items and i try to read them  from the initial elements</div>
<div>combo.clearSelection();</div>
<div> combo.clearItems();</div>
<div> for(let i = 0; i < initialResults.length; i++) {</div>
<div>     combo.insert(i, initialResults[i])</div>
<div> }</div>
</div>
<div></div>
<div>But I see only the first element in the dropdown, ay suggestion.</div>
 

[svetoslav_borislavov]

Hi,

The dataSource function is called on demand. You may use the change event of the input element to manipulate the dataSource.
Please see the following demo: https://stackblitz.com/edit/github-eefp9l-nzupc5?file=src/app/app.component.ts

Best Regards
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Andrea Durando]

Hi

thanks for the response,

but i try to use your example but is not working (also the example),
<div>could you hel me about that ?</div>
<div></div>

[Andrea Durando]

i have another problem about the select the start element, i map the displayMember and the valueMember to a specific fields of a Array of json,
the selection is working fine, but in case i want select programmatically a combobox i have a porblem
I see in the combobox the value of the json and not the label, 

Eg on stackblitz
https://stackblitz.com/edit/github-wppkr5-m699yc?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

I set the value with a specific code and i see the code and not the label in the input of the combobox, 
i try to substitute the value with the label, and I see the right text, but the dropdown window is empty like not any element is matched

[Author]

Posts