ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Bootstrap SelectPicker with Live search using Bootstrap 4 in ASP.Net<p>Hi <a class="username" rel="Waghmare"> Waghmare</a>,</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;asp:Content ID=&#34;Content1&#34; ContentPlaceHolderID=&#34;head&#34; runat=&#34;Server&#34;&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/css/bootstrap-select.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/js/bootstrap-select.js&#34;&gt;&lt;/script&gt; &lt;/asp:Content&gt; &lt;asp:Content ID=&#34;Content2&#34; runat=&#34;server&#34; ContentPlaceHolderID=&#34;ContentPlaceHolder1&#34;&gt; &lt;asp:ScriptManager ID=&#34;Manager1&#34; runat=&#34;server&#34;&gt; &lt;/asp:ScriptManager&gt; &lt;asp:UpdatePanel ID=&#34;upPanelMain&#34; runat=&#34;server&#34;&gt; &lt;ContentTemplate&gt; &lt;div class=&#34;form-horizontal &#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;asp:Label ID=&#34;lblCountry&#34; runat=&#34;server&#34; CssClass=&#34;control-label col-lg-offset-1 col-md-offset-1 col-lg-2 col-md-2&#34; Text=&#34;Country Name&#34; /&gt; &lt;div class=&#34;col-lg-3 col-md-3 col-sm-12 col-xs-12&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-globe&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;asp:DropDownList ID=&#34;drpCountry&#34; runat=&#34;server&#34; class=&#34;selectpicker&#34; OnSelectedIndexChanged=&#34;drpCountry_SelectedIndexChanged&#34; AutoPostBack=&#34;true&#34; data-live-search=&#34;true&#34;&gt; &lt;/asp:DropDownList&gt; &lt;/div&gt; &lt;/div&gt; &lt;asp:Label ID=&#34;lblCity&#34; runat=&#34;server&#34; CssClass=&#34;control-label col-lg-2 col-md-2&#34; Text=&#34;Country Name&#34; /&gt; &lt;div class=&#34;col-lg-3 col-md-3 col-sm-12 col-xs-12&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-globe&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;asp:TextBox ID=&#34;txtCity&#34; runat=&#34;server&#34; MaxLength=&#34;150&#34; placeholder=&#34;City Name&#34; AutoPostBack=&#34;true&#34; OnTextChanged=&#34;txtCity_TextChanged&#34; CssClass=&#34;form-control&#34; Style=&#34;text-transform: uppercase&#34;&gt; &lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;div class=&#34;col-md-offset-2 col-lg-offset-2 col-md-2 col-lg-2 &#34; style=&#34;margin-bottom: 12px&#34; runat=&#34;server&#34; id=&#34;divSave&#34;&gt; &lt;asp:LinkButton ID=&#34;btnSave&#34; runat=&#34;server&#34; CssClass=&#34;btn btn-success btn-block btn-md&#34; OnClick=&#34;btnSave_Click&#34; ValidationGroup=&#34;First&#34;&gt;&lt;span class=&#34;fa fa-download&#34;&gt;&lt;/span&gt;&amp;nbsp;Save&lt;/asp:LinkButton&gt; &lt;/div&gt; &lt;div class=&#34;col-md-2 col-lg-2 &#34; style=&#34;margin-bottom: 12px&#34; runat=&#34;server&#34; id=&#34;divUpdate&#34;&gt; &lt;asp:LinkButton ID=&#34;btnUpdate&#34; runat=&#34;server&#34; CssClass=&#34;btn btn-warning btn-block btn-md&#34; OnClick=&#34;btnUpdate_Click&#34; ValidationGroup=&#34;First&#34;&gt;&lt;span class=&#34;fa fa-pencil&#34;&gt;&lt;/span&gt;&amp;nbsp;Update&lt;/asp:LinkButton&gt; &lt;/div&gt; &lt;div class=&#34;col-md-2 col-lg-2 &#34; style=&#34;margin-bottom: 12px&#34; runat=&#34;server&#34; id=&#34;divDelete&#34;&gt; &lt;asp:LinkButton ID=&#34;btnDelete&#34; runat=&#34;server&#34; CssClass=&#34;btn btn-danger btn-block btn-md&#34; OnClick=&#34;btnDelete_Click&#34; ValidationGroup=&#34;First&#34;&gt;&lt;span class=&#34;fa fa-bitbucket&#34;&gt;&lt;/span&gt;&amp;nbsp;Delete&lt;/asp:LinkButton&gt; &lt;/div&gt; &lt;div class=&#34;col-md-2 col-lg-2 &#34;&gt; &lt;asp:LinkButton ID=&#34;btnClear&#34; runat=&#34;server&#34; CssClass=&#34;btn btn-default btn-block btn-md&#34; OnClick=&#34;btnClear_Click&#34;&gt;&lt;span class=&#34;fa fa-repeat&#34;&gt;&lt;/span&gt;&amp;nbsp;Clear&lt;/asp:LinkButton&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { ApplySelectPicker(); }); //On UpdatePanel Refresh var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(function (sender, e) { if (sender._postBackSettings.panelsToUpdate != null) { ApplySelectPicker(); } }); }; function ApplySelectPicker() { $(&#39;[id*=drpCountry]&#39;).selectpicker({ style: &#39;btn-info&#39;, size: 5 }); }; &lt;/script&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/asp:Content&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindCountry(); } } private void BindCountry() { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[2] { new DataColumn(&#34;ID&#34;), new DataColumn(&#34;Name&#34;) }); dt.Rows.Add(&#34;1&#34;, &#34;India&#34;); dt.Rows.Add(&#34;2&#34;, &#34;Sri Lanka&#34;); dt.Rows.Add(&#34;3&#34;, &#34;Pakistan&#34;); dt.Rows.Add(&#34;4&#34;, &#34;Bangladesh&#34;); dt.Rows.Add(&#34;5&#34;, &#34;Australia&#34;); dt.Rows.Add(&#34;6&#34;, &#34;South Africa&#34;); dt.Rows.Add(&#34;7&#34;, &#34;West Africa&#34;); dt.Rows.Add(&#34;8&#34;, &#34;Newzeland&#34;); dt.Rows.Add(&#34;9&#34;, &#34;West Indies&#34;); dt.Rows.Add(&#34;10&#34;, &#34;England&#34;); drpCountry.DataSource = dt; drpCountry.DataTextField = &#34;Name&#34;; drpCountry.DataValueField = &#34;ID&#34;; drpCountry.DataBind(); } protected void btnSave_Click(object sender, EventArgs e) { } protected void btnUpdate_Click(object sender, EventArgs e) { } protected void btnDelete_Click(object sender, EventArgs e) { } protected void btnClear_Click(object sender, EventArgs e) { } protected void drpCountry_SelectedIndexChanged(object sender, EventArgs e) { } protected void txtCity_TextChanged(object sender, EventArgs e) { }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If Not IsPostBack Then BindCountry() End If End Sub Private Sub BindCountry() Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn(1) {New DataColumn(&#34;ID&#34;), New DataColumn(&#34;Name&#34;)}) dt.Rows.Add(&#34;1&#34;, &#34;India&#34;) dt.Rows.Add(&#34;2&#34;, &#34;Sri Lanka&#34;) dt.Rows.Add(&#34;3&#34;, &#34;Pakistan&#34;) dt.Rows.Add(&#34;4&#34;, &#34;Bangladesh&#34;) dt.Rows.Add(&#34;5&#34;, &#34;Australia&#34;) dt.Rows.Add(&#34;6&#34;, &#34;South Africa&#34;) dt.Rows.Add(&#34;7&#34;, &#34;West Africa&#34;) dt.Rows.Add(&#34;8&#34;, &#34;Newzeland&#34;) dt.Rows.Add(&#34;9&#34;, &#34;West Indies&#34;) dt.Rows.Add(&#34;10&#34;, &#34;England&#34;) drpCountry.DataSource = dt drpCountry.DataTextField = &#34;Name&#34; drpCountry.DataValueField = &#34;ID&#34; drpCountry.DataBind() End Sub Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs) End Sub Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs) End Sub Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As EventArgs) End Sub Protected Sub btnClear_Click(ByVal sender As Object, ByVal e As EventArgs) End Sub Protected Sub drpCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) End Sub Protected Sub txtCity_TextChanged(ByVal sender As Object, ByVal e As EventArgs) End Sub</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://i.imgur.com/pD7ZpQk.gif" alt="" width="368" height="386" /></p>https://www.aspforums.net:443/Threads/186075/Bootstrap-SelectPicker-with-Live-search-using-Bootstrap-4-in-ASPNet/https://www.aspforums.net:443/Threads/186075/Bootstrap-SelectPicker-with-Live-search-using-Bootstrap-4-in-ASPNet/Thu, 16 Aug 2018 01:50:24 GMT