【问题标题】:Kendo AutoComplete search() method not working剑道自动完成搜索()方法不起作用
【发布时间】:2021-10-21 05:42:36
【问题描述】:

我正在使用 minLength 为 4 的 Kendo AutoComplete 小部件。但是,如果用户单击“GO”按钮,我想在达到 minLength 之前强制执行搜索。调用 search 的行在调试时执行没有错误,但什么也不做。我正在使用带有服务器过滤的远程数据。一旦达到最小长度,自动完成功能就可以完美运行,我就是无法强制搜索。这是我的代码:

$(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();
    });
});
<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>

【问题讨论】:

    标签: search kendo-ui autocomplete telerik kendo-autocomplete


    【解决方案1】:

    剑道自动完成search 似乎尊重minLength 选项。 这可以通过以下方式解决:

    1. minLength 显式设置为1 或searchTerm 的长度
    2. 进行搜索
    3. minLength 设置为默认值 (4)
        $('#btnSearchPatients').on('click', function () {
          var searchTerm = $('#txtPatientSearch').val();
          let a = $('#txtPatientSearch').data('kendoAutoComplete');
          a.setOptions({minLength: 1});
          // Searching twice here, because kendo does not show suggestions
          a.search(searchTerm);
          a.search(searchTerm);
          a.setOptions({minLength: 4});
        });
    

    由于某种原因,剑道不尊重其选项的变化,所以我们搜索了两次。 (使用 setTimeoutPromise 没有帮助 - 假设在调用 setOptions 后 kendo 需要一些时间来更新小部件和 UI)

    【讨论】:

    猜你喜欢
    • 2013-04-07
    • 1970-01-01
    • 1970-01-01
    • 2017-09-16
    • 1970-01-01
    • 1970-01-01
    • 2021-04-26
    • 1970-01-01
    • 2021-08-29
    相关资源
    最近更新 更多