I am building a Razor Pages ASP.NET CORE 3.0 web application.
I am using a Bootstrap "selectpicker" dropdown having "data-live-search= true". I am populating the dropdown with names of employees. Following is the dropdown code.
<select id="spdd" name="spdd" asp-for="employee"
asp-items="@Model.employees"
value="Search" style=""
class="selectpicker show-tick form-control" data-live-search="true">
</select>
I am using "1.12.4" version of Bootstrap "selectpicker" -
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
I am trying to search and display in the selectpicker dropdown the employee names that matches the search text entered in a textbox. On search button click, I want the selectpicker dropdown to display the result. Following is the html code of search text box and search button.
<div class="col-xs-11 col-sm-11 col-md-6 col-lg-9"
style="padding-right:0px">
<input type="text" asp-for="@Model.EmployeeSearchText"
class="form-control" id="EmployeeSearchText"
name="EmployeeSearchText" placeholder="Enter Employee Search Text"
value="">
<div class="col-xs-1 col-sm-1 col-md-6 col-lg-9 text-left" style="padding-left:0px">
<button class="btn btn-secondary" type="button" id="btnEmployeeSrch">
<i class="fa fa-search"></i>
</button>
</div>
Following is the jquery script that tries to put the employee search text in the selectpicker searchbox and triggers change in selectpicker dropdown to display employees as per the search text .
$("#btnEmployeeSrch").click(function () {
var EmployeeSearchText = $("#EmployeeSearchText");
$('#spdd').parent().find('.bs-searchbox input').attr('value', EmployeeSearchText);
$('#spdd').selectpicker('search.update')
$("#spdd").trigger('propertychange');
$('#spdd').selectpicker('refresh');
})
The above jquery code is not working.
Question: