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