Adding bootstrap 5 search bar dropdown-CodePudding

I'm a bit new here but I was wondering if anyone could help when it comes to adding a dropdown menu with a search bar. For example, I want the user to be able to select certain items from a list of certain foods or search for them but I haven't been able to find a tutorial in bootstrap 5 to do this. I read the documentation but It didn't give me any specific way of implementing a search bar with the dropdown list.

I understand I can manually add the code for the search bar using javascript and try to link it with the bootstrap dropdown, but i'm not very familiar with JavaScript and was wondering whether boostrap has a way to do it so that the layout does not mess up wither.

I followed a tutorial which is in bootstrap 4 but it essentially had the idea I'm going for but since jQuery was removed from bootstrap 5, it would not work in my current website. This was code: https://codeshare.io/0gQRwQ

$('.select2').select2();

.select2-container .select2-selection--single {
  height: 34px !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #ccc !important;
  border-radius: 0px !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div class="container">
  <div class="row">
    <form class="col-md-4">
      <label>Select</label>
      <select class="form-control select2">
        <option>Select</option>
        <option>Car</option>
        <option>Bike</option>
        <option>Scooter</option>
        <option>Cycle</option>
        <option>Horse</option>
      </select>
    </form>
  </div>
</div>

Any advice would be greatly appreciated. Thank you

CodePudding user response：

As @Alimo said, your example is based on Select2 library and its heavily depend on jQuery and as far I know, there is no plans to remove it.

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.

As an alternative you could use tom-select.js

Tom Select was forked from selectize.js with four main objectives: modernizing the code base, decoupling from jQuery, expanding functionality, and addressing issue backlogs.

This is the main example:

new TomSelect("#select-tags", {
  plugins: ['remove_button'],
  create: true,
  onItemAdd: function() {
    this.setTextboxValue('');
    this.refreshOptions();
  },
  render: {
    option: function(data, escape) {
      return '<div class="d-flex"><span>'   escape(data.value)   '</span><span class="ms-auto text-muted">'   escape(data.date)   '</span></div>';
    },
    item: function(data, escape) {
      return '<div>'   escape(data.value)   '</div>';
    }
  }
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>

<div class="container">
  <div class="row">
    <div class="p-4">
      <select id="select-tags" multiple placeholder="Best movies and TV shows">
        <optgroup label="TV Shows">
          <option value="Blue Bloods" data-date="2010-2021">Blue Bloods (2010-2021)</option>
          <option value="Magnum P.I." data-date="1980-1988" selected>Magnum P.I. (1980-1988)</option>
        </optgroup>
        <optgroup label="Movies">
          <option value="An Innocent Man" data-date="1989">An Innocent Man (1989)</option>
          <option value="In & Out" data-date="1997">In & Out (1997)</option>
          <option value="Lassiter" data-date="1984">Lassiter (1984)</option>
          <option value="Mr. Baseball" data-date="1992">Mr. Baseball (1992)</option>
          <option value="Quigley Down Under" data-date="1990">Quigley Down Under (1990)</option>
          <option value="Three Men and a Baby" data-date="1987">Three Men and a Baby (1987)</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

Here is more examples if you need.

CodePudding user response：

The search bar in the select field is not part of bootstrap. It is provided by the select2 package you have included. And unfortunately select2 requires jQuery to operate.

If you want to use bootstrap 5 and remove jQuery entirely, you can use datalists to achieve similar functionality.