Autocomplete – Textbox – Datasource – using keyup event

Tagged: Update Datasource using Event instead of reference

This topic has 1 reply, 2 voices, and was last updated 3 years, 7 months ago by yavordashew.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
March 20, 2021 at 3:30 pm #101644

Gourav
Member

Hi Team,
We are trying to use Callback functions to change datasource using references like given in below example and it works.
https://www.htmlelements.com/angular/demos/textbox/data-source-callback/
However, now as per our new use we can not use references now. We want to bind datasource with element, instead of reference.
For Example –
<div>
<div><smart-text-box [autoComplete]=”‘manual'” (keyup)=”updateDataSource($event,field)” [dataSource]=”typeAheadData” [inputMember]=”‘name'”></smart-text-box></div>
<div></div>
</div>
Can you suggest what changes to below code should be applied, so that we can update data using onkeyup event.
<pre class=”prettyprint prettyprinted”>Example(https://www.htmlelements.com/angular/demos/textbox/data-source-callback/) – is using reference – textbox.datasource.
textBox.dataSource = function (query: string, callback: Function): void {
let result: Array<object> = [];
for (let d = 0; d < data.length; d++) {
if (data[d].name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
result.push(data[d]);
}
}
setTimeout(function () {
callback(result);
}, 100);
};
But we want use use a method like
updateDataSource(event,field) {
//what code should be written here in ts file.
}

March 22, 2021 at 11:49 am #101646
yavordashew
Member
Hi Gourav,
If you want yo change the dataSource of the texbox component you don’t need to bind to the (keyup) event in order to do that. That is because if you have datasouce of a function type it will call this function but only when you have the autocomplete property set to any other value except none. I have made code example about this and also one another if you need to bind to (keyup).
Please, do not hesitate to contact us if you have any additional questions.
<smart-text-box #textbox [autoComplete]="'manual'" [dataSource]="data" [inputMember]="'name'"></smart-text-box>
```
export class AppComponent implements AfterViewInit, OnInit {
 @ViewChild('textbox', { read: TextBoxComponent, static: false }) textbox: TextBoxComponent;
 data = [
 { "name": "Afghanistan", "code": "AF" },
 { "name": "land Islands", "code": "AX" },
 { "name": "Albania", "code": "AL" },
 { "name": "Algeria", "code": "DZ" },
 { "name": "American Samoa", "code": "AS" },
 { "name": "AndorrA", "code": "AD" },
 { "name": "Angola", "code": "AO" },
 { "name": "Anguilla", "code": "AI" },
 { "name": "Antarctica", "code": "AQ" },
 { "name": "Antigua and Barbuda", "code": "AG" },
 ];
 ngOnInit(): void {
 // onInit code.
 }
 ngAfterViewInit(): void {
 // afterViewInit code.
 this.init();
 }
 init(): void {
 const data2= [{ "name": "Moldova, Republic of", "code": "MD" },
 { "name": "Monaco", "code": "MC" },
 { "name": "Mongolia", "code": "MN" },
 { "name": "Montenegro", "code": "ME" },
 { "name": "Montserrat", "code": "MS" },
 { "name": "Ukraine", "code": "UA" },
 { "name": "United Arab Emirates", "code": "AE" },
 { "name": "United Kingdom", "code": "GB" },
 { "name": "United States", "code": "US" },
 { "name": "United States Minor Outlying Islands", "code": "UM" },
 { "name": "Uruguay", "code": "UY" },
 { "name": "Vanuatu", "code": "VU" },
 { "name": "Venezuela", "code": "VE" },
 { "name": "Viet Nam", "code": "VN" },
 { "name": "Yemen", "code": "YE" },
 { "name": "Zambia", "code": "ZM" },
 { "name": "Zimbabwe", "code": "ZW" }]
 const textBox = this.textbox;
 textBox.dataSource = function(input: string, callback: Function):void {
 let result: Array<object> = [];
 textBox.displayMember = 'name';
 textBox.valueMember = 'code';
 for (let d = 0; d <data2.length; d++) {
 if (data2[d].name.toLowerCase().indexOf(input.toLowerCase()) > -1) {
 result.push(data2[d]);
 }
 }
 setTimeout(function () {
 callback(result);
 }, 100);
 };
 }
```
And the second case when you want to bind to (keyup):
```
export class AppComponent implements AfterViewInit, OnInit {
 @ViewChild('textbox', { read: TextBoxComponent, static: false }) textbox: TextBoxComponent;
 data = [
 { "name": "Afghanistan", "code": "AF" },
 { "name": "land Islands", "code": "AX" },
 { "name": "Albania", "code": "AL" },
 { "name": "Algeria", "code": "DZ" },
 { "name": "American Samoa", "code": "AS" },
 { "name": "AndorrA", "code": "AD" },
 { "name": "Angola", "code": "AO" },
 { "name": "Anguilla", "code": "AI" },
 { "name": "Antarctica", "code": "AQ" },
 { "name": "Antigua and Barbuda", "code": "AG" },
 ];
 updateDataSource=function ():void {
 //let result: Array <object> = [];
 this.data = [{ "name": "Moldova, Republic of", "code": "MD" },
 { "name": "Monaco", "code": "MC" },
 { "name": "Mongolia", "code": "MN" },
 { "name": "Montenegro", "code": "ME" },
 { "name": "Montserrat", "code": "MS" },
 { "name": "Ukraine", "code": "UA" },
 { "name": "United Arab Emirates", "code": "AE" },
 { "name": "United Kingdom", "code": "GB" },
 { "name": "United States", "code": "US" },
 { "name": "United States Minor Outlying Islands", "code": "UM" },
 { "name": "Uruguay", "code": "UY" },
 { "name": "Vanuatu", "code": "VU" },
 { "name": "Venezuela", "code": "VE" },
 { "name": "Viet Nam", "code": "VN" },
 { "name": "Yemen", "code": "YE" },
 { "name": "Zambia", "code": "ZM" },
 { "name": "Zimbabwe", "code": "ZW" }]
 const textBox = this.textbox;
 textBox.displayMember = 'name';
 textBox.valueMember = 'code';
 };
setTimeout(function () {
callback(result);
}, 100);
};
```
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.