Search bar loses focus when the first character typed in it

[Oz]

I am trying to implement kendo autocomplete and I am new to Kendo.  When the user enters a character query is taken and a list is made using the database and returned to the view. Everything works fine except when the first character is typed search box loses its focus and I need to click on the search box again to type more characters. For some reason also other buttons gets doubled pic below

Here is my code

 $("#query").keyup(e => {
        e.preventDefault();
        if (e.keyCode === 13) {
            $("#btnSearch").click();
        }

        let ds = new DataServices(`${bc.apiBaseUrl}TrendStations/SearchAutoComplete`);
        let xhr = ds.GetData({ query: $("#query").val() });
        $('#query').attr('autocomplete', 'CUSTOM');
        xhr.done((results) => {
            if (results != null) {
                var data = results;
                $("#query").kendoAutoComplete({
                    dataSource: data,
                    filter: "startswith",
                    placeholder: "Enter your search here...",
                    separator: ", "
                });

            } else {
                window.location.reload();
            }


        }).fail(ex => {
            new ErrorHandler().HandleError(ex);
        });
    });
 
I have looked for an answer but no luck! anybody knows what is going on?

[Neli]

Hi Oz,

Could you please share a little bit more details about the scenario and the desired result?

From the provided snippet it seems that you are handling the keyup event for the '#query' element. However, the Kendo AutoComplete is initalized from the same element. If this is correct it seems from the provided snippet that every time when a key is pressed in the '#query' input element a new instance of the Kendo AutoComplete is initialized. This will lead to unexpected behavior, such as the multiple icons. Here is a Dojo example where the provided snippet is used. As you will see, every time when a key is pressed a new 'close' icon appears in the AutoComplete and the popup containing the data is opened. 

With the above said, I would suggest you to take out the code for initializing the AutoComplete widget outside of the keyup function. Here you will find modified Dojo where the AutoComplete is initalized a single time. 

I am not sure about the exact scenario, but if you need to replace the dataSource after the responce is returned from the server, you can use the setDatasource method. 

- https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/methods/setdatasource

Please take a look at the provided information and let me know in case you have additional questions. 

Regards,

Neli