Kendo Autocomplete Displays Two Suggestion Lists

问题:

My Kendo autocomplete control retrieves a Json list successfully. Unfortunately, it calls the MVC controller method twice and creates two suggestion lists. The duplicate list is displayed directly behind the first. When a value is selected from the first suggestion list, the list disappears, but the duplicate list remains visible. I am using a wrapper for the autocomplete control as shown below. I've confirmed that the control is not being referenced in any of the page scripts. The control is located in a partial view that is added to a cshtml view one time (@{ Html.RenderPartial("_AddLineItem"); }).

@(Html.Kendo().AutoComplete()
     .Name("CategorySearch")
     .DataTextField("CategoryName")
     .Filter("contains")
     .DataSource(source =>
     {
         source.Read(read =>
         {
             read.Action("PopulateCategories", "Default");
         })
         .ServerFiltering(false);
    })
)

Generated HTML shows the suggestion list twice, but the associated input control only exists once. The following tags are in the generated HTML twice (these are tags for the suggestion list and they also contain li tags and closing div tags, removed from the pasted HTML below):

<div class="k-animation-container" style="left: 431.13px; top: 405.69px; width: 511px; height: 206px; overflow: hidden; padding-right: 2px; padding-bottom: 4px; padding-left: 2px; margin-left: -2px; display: none; position: absolute; z-index: 10002;">

Does anyone have an idea of what is happening here?

回答1:

Per the comment that I added, the answer is to avoid putting a Kendo autocomplete control inside a JQuery UI dialog control. The dialog forces the autocomplete control to be rendered twice in the browser. I've confirmed this in both Internet Explorer and Firefox. It is reasonable to assume that the same behavior will occur in other browsers as well.