Show all options on focus

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 02 Oct Link to this post

    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.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    290 posts

    Posted 05 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top