how send input kendotextbox value to autocomplete textbox with possible suggestions.

[Tony]

Good day guys,

how possible is this, to send input textbox value to autocomplete textbox while typing. and the autocomplete should be set to readonly.

see attached image

kind regards

 

[Tony]

Hi Eyup,

i think this will help others in the future if they are looking to use this feature,

i changed my autocomplete to a listbox. but the listbox is used for only showing the close matches as the user types which tells the user that name you are typing exists which should only use a unique name.

Here is my configuration for the list box

    @(Html.Kendo().ListBox()
                                 .Name("Possiblematches")
                                 .HtmlAttributes( new { @class= "Possiblematches"})
                                 .DataTextField("CompanyName")
                                 .BindTo(ViewBag.CompanyName)
                                 .ToClientTemplate()
                                 )

and then my javascript configuration

   $("#CompanyName").on("input", function () {
            debugger;
          

            var CompanyName= $("#CompanyName").val();
            var matchesListbox = $("#Possiblematches").data("kendoListBox");

            matchesListbox.dataSource.filter({ field: "CompanyName", operator: "contains", value: CompanyName});

            $.ajax({
               ....call your action method right here 
            });

        });

let me know what you think :)

kind regards

Tony

[Eyup]

Looks nice. Thank you for sharing it with our community :)

I hope it will prove helpful to other developers as well.

[Eyup]

Hi Tony,

 

Thank you for writing to us.

This requirement is possible and can be achieved using the oninput or onkeypress event:
https://www.w3schools.com/jsref/event_oninput.asp

Feel free to give it a try and keep me updated on the result.

 

Regards,
Eyup
Progress Telerik

[Tony]

Hi Eyup,

thanks for the feedback,

and pointing me in the right direction. I used jquery function on the button like below.

     $("#CompanyName").on("input", function () {
            debugger;
           

            var CompanyName= $("#CompanyName").val();
            var matchesAutocomplete = $("#Possiblematches").data("kendoAutoComplete");
            matchesAutocomplete.search($("#CompanyName").val());

            $.ajax({
                type: "POST",
                url: "Companys/Company/CompanyNameCheckAvailable",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ CompanyName: CompanyName }),
                dataType: "json",
                success: function (result) {

              

                }
            });

        });

and have my autocomplete control as below

 @(Html.Kendo().AutoComplete()
                                 .Name("Possiblematches")
                                 .DataTextField("CompanyName")
                                 .Filter("contains")
                                 .DataSource(source =>
                                 {
                                     source.Read(read =>
                                     {
                                         read.Action("CompanyName", "Company");
                                     })
                                     .ServerFiltering(false);
                                 })
                                 .HtmlAttributes(new {  @readonly = "true" })
                                 .ToClientTemplate()
                                 )

now the problem is that the autocomplete results are more in dropdownlist. is it possible to make the autocomplete like a listbox?

kind regards

Tony

[Eyup]

I am glad the provided directions have proven helpful and we have such a nice progress. However, I am afraid I am having difficulties in figuring out your next requirements. Can you provide some images or drawings to demonstrate what you are looking for?

[Tony]

Hi Eyup,

thanks for the feedback let show you what i was looking for.