how send input kendotextbox value to autocomplete textbox with possible suggestions.
3 Answers 13 Views
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Tony asked on 18 May 2021, 10:32 AM

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

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Tony
Top achievements
Rank 1
Iron
Iron
Iron
answered on 07 Jun 2021, 07:24 AM

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

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

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

- by
Eyup
Telerik team
on 09 Jun 2021, 05:06 PM
0
Eyup
Telerik team
answered on 21 May 2021, 06:18 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Tony
Top achievements
Rank 1
Iron
Iron
Iron
answered on 21 May 2021, 06:57 AM | edited on 21 May 2021, 06:58 AM

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

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?
- by
Eyup
Telerik team
on 25 May 2021, 10:15 AM
Hi Eyup,

thanks for the feedback let show you what i was looking for.
- by
Tony
Top achievements
Rank 1
Iron
Iron
Iron
on 07 Jun 2021, 07:15 AM
Asked by
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Tony
Top achievements
Rank 1
Iron
Iron
Iron
Eyup
Telerik team
Share this question
or