Bootstrap-select, behavior like SO tags field

Bootstrap-select, behavior like SO tags field

By : احمد رفعت البياتي
Date : December 05 2020, 12:23 PM
it fixes the issue Okay, this appeared to be extremely complex problem to solve. Partially because I was using Ajax-Bootstrap-Select (thought this was insignificant, but it was not). This code has some problems, like spamming setTimeout - I for most don't care, but this code should give an idea to anybody who is struggling with the same issue I did.
code :
var keywordsSelectItemTemplate = $('#@Html.IdForModel()selectItemTemplate').html();
var keywordsSelectBox = $('#@Html.IdForModel()');
var keywordsSelectedElements = [];
// list of words that were persisted
var keywordsAddedElementsStable = [];
// Remembered list of words that are currently in the input box (currently entered)
var keywordsAddedElements = [];

// The search box input
var keywordsSearchBox = keywordsSelectBox.parent().find("div.bs-searchbox").find("input");
// Subscribe to all kind of keypress events to track changes
keywordsSearchBox.bind("propertychange change click keyup input paste",
       function(event) {
                            var value = keywordsSearchBox.val();

                            // Parse words by splitting input box value with ,
                            var keywords = value.split(",").map(function (str) {
                                return str.trim();
                            }).filter(function(str) {
                                return str != undefined && str.length > 0;

                            // Removing last word, because this is the word that is currently being typed
                            if (keywordsAddedElements.slice(-1).length > 0) {
                                keywordsAddedElements.splice(-1, 1);

                            // Remembering all words so Bootstrap-Select-Ajax could process them.
                            keywords.forEach(function(keyword) {
                                if ($.inArray(keyword, keywordsAddedElements) === -1) {

                            // Adding entered words as selected and refresh the selectbox. The timeout should be biger than the timeout defined
                            // in Bootstrap-Select-Ajax, so this refresh will happen after Bootstrap-Select-Ajax process the selected list
                            setTimeout(function() {
                                keywords.forEach(function(keyword) {
                                    keywordsSelectBox.find("[value=" + keyword + "]").attr('selected', '1');

                            }, 500);

                    // If we leave search box input - remember the entered items as persisted. 
                    // The user is no longer able to change them, unless by clicking in Bootstrap-Select (as any other items)
                    keywordsSearchBox.focusout(function() {
                        // Refreshing selected items of Bootstrap-Select-Ajax, ensuring that it thinks 
                        // these items were processed as any other.
                        var selectedItems = keywordsSelectBox.ajaxSelectPicker()
                        keywordsAddedElements.forEach(function(el) {
                            if (!selectedItems.some(function(element) { return element.value === el;})) {
                                    "class": "",
                                    data: {
                                        content: el
                                    preserved: true,
                                    selected: true,
                                    text: el,
                                    value: el

                        // Remember items as "persisted"
                        keywordsAddedElementsStable = keywordsAddedElementsStable.concat(keywordsAddedElements);
                        keywordsAddedElements = [];
  // Adding both "persisted" and "temporary" items to the Bootstrap-Select-Ajax list.
   keywordsAddedElementsStable.concat(keywordsAddedElements).forEach(function(el) {
            value: el,
            text: el,
            data: {
                content: el
var keywordsSearchBox = keywordsSelectBox.parent().find("div.bs-searchbox").find("input")
keywordsSearchBox.bind("propertychange change click keyup input paste",
       function(event) { ...

Share : facebook icon twitter icon
Imitate Select Behavior with Button in Bootstrap

Imitate Select Behavior with Button in Bootstrap

By : user3542232
Date : March 29 2020, 07:55 AM
like below fixes the issue You can use the btn-block class to make the buttons and dropdown fill width..
code :
   <div class="btn-group btn-block">
              <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        Go Home... <span class="caret"></span>
              <ul class="dropdown-menu btn-block" role="menu">
                    <li><a href="#">Go Home</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Go Left</a></li>
                    <li><a href="#">Go Up</a></li>
                    <li><a href="#">Go Right</a></li>
                    <li><a href="#">Go Down</a></li>
$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
How to disable a input field according to another select field value in bootstrap?

How to disable a input field according to another select field value in bootstrap?

By : Fara
Date : March 29 2020, 07:55 AM
I wish this helpful for you Since I could not able to find a short cut for this using bootstrap, I thought to write this in native javascript.
code :
            function disable(select_val,input_id) {
                var e = document.getElementById(select_val);
                var strUser = e.options[e.selectedIndex].value;
                if(strUser === "100"){
                    document.getElementById(input_id).disabled = false;
                    document.getElementById(input_id).value = document.getElementById(input_id).defaultValue;
                    document.getElementById(input_id).disabled = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Principle mode of water supply</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="water_supply" onchange="disable('water_supply', 'w_s_other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="4">Private pipe line</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>                          
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="w_s_other" disabled value="">
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">x2</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="x2" onchange="disable('x2', 'x2other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>                          
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="x2other" disabled value="">
how to horizontally align label and select tags in bootstrap 3?

how to horizontally align label and select tags in bootstrap 3?

By : TVN
Date : March 29 2020, 07:55 AM
around this issue You forgot a L :
Bootstrap tags input & Bootstrap select

Bootstrap tags input & Bootstrap select

By : Tester
Date : March 29 2020, 07:55 AM
I hope this helps you . I'm not familiar with this widget, but I suspect your problem is here:
code :
idtags = $(this).prop('id').substr(13);
$('#noqid_' + idtags)
tags = $(this).val();
idtags = $(this).prop('id').substr(13);
Rails, Chosen, Bootstrap: How to apply Bootstrap Styling to a Multiple Select field

Rails, Chosen, Bootstrap: How to apply Bootstrap Styling to a Multiple Select field

By : Ed Bond
Date : March 29 2020, 07:55 AM
it fixes the issue to Mark Davies, I found somewhat of a solution.
The chosen library uses the classes "chosen-choices" and "search-choices". It is possible to overwrite these classes with the attribute "!important".
code :
.chosen-choices {
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
Related Posts Related Posts :
  • Append blade file to jquery function
  • NodeJS TypeError: Cannot read property of undefined
  • Using ng-if to check angular variable from another directive in angularjs
  • Replacing [b][/b] to apply BOLD text on a DIV
  • Class name changing dynamically from JSON object in Angular.js
  • to add button which will redirect to View Page of current row in JQGrid
  • firebaseAuth GoogleAuthProvider() signInWithRedirect
  • AngularJS 1 Restangular GET stripping #
  • How can I do column move in ui-grid on tap & hold?
  • How to track a javascript function?
  • Chart.JS: How to add Data to a specific dataset
  • Accessing 'this' inside the callback should reference my array
  • get empty request while posting
  • CSS Flip animation on click
  • How to hide element if filter returns null angularjs
  • Popups for checking/unchecking a checkbox
  • Loop event click jquery synchronize current status
  • "Export to excel" button kendogrid download more than 1 file
  • Load bootstrap forms from select page
  • Using Vue with django
  • JS Outputting a form value receives 'undefined' in console
  • Why do enzyme not find 'tr' in a table?
  • Inject GET parameter to target URL of a button, on click
  • tags in JS and css counter increment
  • Post "url-from' in a form
  • TypeError: $(...).magnificPopup is not a function
  • .toggleclass and .slidetoggle don't work
  • user agent for windows 7 vs 8 vs 10
  • How to write (A or B or C) followed by X in JavaScript regex?
  • Ember template convention
  • Sum multiple objects in multiple arrays and then average sums
  • Append a list to ul
  • React router Link; activeClassName not working
  • Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
  • How to require Stateless Functional Components (Unknown module _createWrapper?)
  • Binding a field state (disabled or hidden) according to different selected values in a combobox
  • stomp+ActiveMQ with SSL
  • creating an expression that acts like a .contains
  • Showcase the first n-items in a bootstrap grid
  • Background colour fade on carousel
  • Extend prototype using decorator
  • In react router v4 how does one link to a fragment identifier?
  • How to send local storage data with ajax to php page?
  • Javascript not working after publish to IIS
  • Remove GMT+530(Indian standard Time) without changing current time in javascript
  • Javascript: Syntax creating private object properties
  • how to make the table not having <thead> header fixed
  • ng-init with condition statements
  • javascript change height based on element's height
  • How to improve performance when loading CSV file into html table with javascript and ajax?
  • Javascript for rounding down in a finance calculator
  • .htaccess file rules are disturbing the menubar layout when window goes on mobile view
  • Angular 1.5 Option with ng-change
  • Angular Trix not working in all browsers
  • Vue.js add property to bound object
  • Push item with interfaces on typescript
  • jQuery on click event firing multiple times
  • Add first three elements of array in javascript
  • HTML5 video Uncaught TypeError: .play is not a function
  • Manipulate java List<Object> in Jquery
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com