AutoComplete search method not working

1 Answer 147 Views
AutoComplete
Anna
Top achievements
Rank 1
Iron
Iron
Iron
Anna asked on 18 Aug 2021, 08:03 PM

I am using the AutoComplete widget with a minLength of 4. However, if the user clicks a "GO" button I want to force the search to execute before the minLength is reached. The line where search is called executes without errors while debugging  but does nothing. I am using remote data with server filtering. It works perfectly once the min length is reached. Here is my code: 


<div id="ddPatientSearch" class="dropdown-menu dropdown-menu-left border-dark" aria-labelledby="btnOpenSearch">
    <div class="demo-section k-content" style="width:400px">
        <div class="container-fluid">
            <div class="row">
                <div class="col-10 pl-1 pr-0 text-right">
                    <input id="txtPatientSearch" class="form-control form-control-sm" placeholder="Search patients" />
                </div>
                <div class="col-2 pl-1 pr-0">
                    <button id="btnSearchPatients" type="button">GO</button>
                </div>
            </div>
        </div>
        <div class="demo-hint pl-2 text-dark" style="font-size:12px">Hint: Search by name, subscriber, or MRN</div>
    </div>
</div>


$(function() {
    $("#txtPatientSearch").kendoAutoComplete({
        dataTextField: 'PatName',
        filter: 'contains',
        minLength: 4,
        clearButton: false,
        template: '#= data.PatName # ( #= data.CurrentAge # #= data.Gender # ) <br> Sub. ID: #= data.SubscriberID # <br> MRN: #= data.MRN #',          
        dataSource: {
            serverFiltering: true,
            transport: {
                read: {
                    url: searchUrl,
                    data: function () {
                        return {
                            searchTerm: $('#txtPatientSearch').val(),
                            patientListId: Filters.getSelectedPatientList().value
                        }
                    }
                    
                }
            },
            group: { field: "ResCategory" }
            
        }
    });

    $('#btnSearchPatients').on('click', function () {
        var searchTerm = $('#txtPatientSearch').val();
        $('#txtPatientSearch').data('kendoAutoComplete').search(searchTerm);
    });

    //Keeps the dropdown from closing when the "GO" button is clicked
    $('#ddPatientSearch').click(function (e) {
        e.stopPropagation();
    });
});

1 Answer, 1 is accepted

Sort by
1
Accepted
Martin
Telerik team
answered on 23 Aug 2021, 02:30 PM

Hello, Anna,

Thank you for reporting the behavior. Normally, the search method is not intended to search before the minimum number of characters are typed. A possible workaround is to use the setOptions method and change the minLength to 1, call the search method and set minLength back to 4. While attempting to achieve that, we found out that the search method must be called twice to work as expected. I have therefore logged a bug in our Feedback Portal to investigate further. Here is the example I used for reference.

As a small token of gratitude for leading us to that conclusion, I am updating your Telerik Points.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
AutoComplete
Asked by
Anna
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Martin
Telerik team
Share this question
or