An interactive Javascript list and array builder using a multi-select input with an added on search filter.

This example uses fruit that can be selected or filtered down with the search and moved across into the built list. The built list is actually just an array behind the scenes.

CodePen link.

The Code

Firstly the built list array is defined:

let the_list = [];

When the add button (green) is clicked it gets an array of the selected fruits. An array is due to the multi-select as there could be multiple fruits selected.

The array is then iterated through to check if the fruit has not already been moved to the built list (on the left).

If it isn’t then add it into the built list array and append the select option.

$("#add-btn").click(function () {
    let items = $("#the-list").val();
    for (let i = 0; i < items.length; ++i) {
        if (the_list.indexOf(items[i]) === -1) {
            the_list.push(items[i]);
            $("#built-list").append(new Option(items[i], items[i]));
        }
    }
});

The remove button (red) gets the array of the selected fruits from the built list. They are removed from the built list array and the select option removed.

$("#remove-btn").click(function () {
    let items = $("#built-list").val();
    for (let i = 0; i < items.length; ++i) {
        let remove_item = items[i];
        the_list = the_list.filter((i) => i !== remove_item);
        $("#built-list option[value='" + remove_item + "']").remove();
    }
});

The filter or search input is run by a function:

function filterList() {
    let query = $.trim($("#search-list").val());
    setTimeout(function () {
        $("#the-list option").each(function (i) {
            let option_text = $(this).text();
            if (option_text.indexOf(query) !== -1) {
                $("#the-list option[value='" + option_text + "']").css(
                    "display",
                    "inherit"
                );
            } else {
                $("#the-list option[value='" + option_text + "']").css(
                    "display",
                    "none"
                );
            }
        });
    }, 400);
}

$("#search-list").on("input", filterList);

Basically, typing into the input will go through each of the select options to find a match for the value to what is in the search input. setTimeout is used to create a tiny bit of delay to prevent instantly searching and (potentially) bouncing/flashing the select options.

HTML

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-4">
              <div class="input-group mb-3">
                <span class="input-group-text">Search</span>
                <input type="text" class="form-control" placeholder="ItemName" id="search-list" minlength="1" maxlength="24">
              </div>
              <select class="form-select" multiple id="the-list">
                <option value="Orange" selected>Orange</option>
                <option value="Lime">Lime</option>
                <option value="Melon">Melon</option>
                <option value="Apple">Apple</option>
                <option value="Lemon">Lemon</option>
                <option value="Mango">Mango</option>
                <option value="Peach">Peach</option>
                <option value="Berry">Berry</option>
                <option value="Fig">Fig</option>
                <option value="Plum">Plum</option>
              </select>
            </div>
            <div class="col-4">
              <div class="d-grid gap-2">
                <button class="btn btn-success" type="button" id="add-btn">>></button>
                <button class="btn btn-danger" type="button" id="remove-btn">
                  <<</button>
              </div>
            </div>
            <div class="col-4">
              <div class="input-group mb-3">
                <span class="input-group-text">Search</span>
                <input type="text" class="form-control" placeholder="ItemName" id="search-built-list" minlength="1" maxlength="24">
              </div>
              <select class="form-select" multiple id="built-list">
              </select>
            </div>
          </div>
          <div class="row" id="products-div">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>