Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

554
Views
Bootstrap select picker - How to put a search text in the selectpicker searchbox and trigger the dropdown to display search result, using javascript?

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:

  1. How can I put a search text in the selectpicker searchbox and trigger the dropdown to display search result, using javascript?
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!