Show all options on focus

[Andrew]

We have AutoComplete working in MVC with this in the view:

@(Html.Kendo().AutoComplete()
.Name("ContentTagsAddt")
.DataTextField("TagName")
.HtmlAttributes(new { style = "width:700px" })
.Placeholder("Begin Typeing Additional Tags...")
.MinLength(3)
.Filter("startswith")
.Separator(", ")
.Value(Model.AdditionalContentTags)
.DataSource(source => source
    .Custom()
    .Group(g => g.Add("TagGroup", typeof(string)))
    .Type("aspnetmvc-ajax")
    .ServerFiltering(true)
    .ServerPaging(true)
    .PageSize(20)
    .Transport(transport => transport
        .Read("GetContentTag", "Article")
    )
    .Schema(schema =>
    {
        schema.Data("Data")
            .Total("Total");
    })
)
)

And it's datasource looks like:

public JsonResult GetContentTag([DataSourceRequest] DataSourceRequest request)
{
    var tags = oandpService.GetContentTags();

    return Json(tags.ToDataSourceResult(request));
}

The table it's using to populate is pretty small (37 rows). We'd really like to have the ability to show all items on focus. Would that be possible? An added bonus is if the AutoComplete stays open the entire time and as the person types it highlights the suggestions.

[Veselin Tsvetanov]

Hello Andrew,

The described requirement is possible, although, it will require some customization of the widget.

To open the drop-down on focus, you will have to force search with an empty string. You could easily do that by subscribing to the ​focus ​event of the AutoComplete input field:

$(document).ready(function () {
    var autocompleteInput = $('.k-autocomplete input');
    autocompleteInput.on('focus', function (e) {
        var value = autocompleteInput.val();
        var autocomplete = $("#ContentTagsAddt").data("kendoAutoComplete");
        autocomplete.search(value);
    });
});

To keep the drop-down always open, you could simply prevent the close event:

function closeHandler(e) {
    e.preventDefault();
};

Note that if you have a scroll on your page, the already opened drop-down will remain fixed on the screen and will scroll down / up with the page.

Regards,
Veselin Tsvetanov
Telerik by Progress