How to set the width and height of the Kendo UI AutoComplete textbox in Razor Pages?

Question

This is my .cshtml code

<div class="form-floating mb-3">
     <input asp-for="Code" id="txtCode" class="form-control" autocomplete="off" />               
     <label asp-for="Code" class="control-label"></label>
     <small asp-description-for="Code" class="text-muted"></small>
     <div>
          <span asp-validation-for="Code" class="text-danger"></span>
     </div>
 </div>

This is my JS function to configure the autocomplete on the above textbox:

<script>

      $(function () {

           var autoCompleteURL = '@Url.Page("MyPage", "Search")' ;

           $("#txtCode").kendoAutoComplete  ({       
                minLength: 3, // you need to type atleast 3 characters
                type: "json",
                dataTextField: "code",  
                dataSource: {
                    transport: {
                        read: autoCompleteURL,
                        parameterMap: function (data) {
                            return {
                                filterValue: $("#txtCode").val()
                            };
                        }
                },

                serverFiltering: true,
                serverPaging: true,
                pageSize: 10 // maximum list size in autocomplete ,               

             }

           });
        });

    </script>

But my txtCode now has an inner textbox appearing. How can I get rid of that inner textbox from my main textbox which is txtCode.

I have attached the screenshot how it is looking now.

Thanks.