Reply To: Autocomplete – Textbox – Datasource – using keyup event

[yavordashew]

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/