Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Material Select Searchable Add Searched Term

ilivingston premium asked 6 years ago


Is there a way to add the term from a searchable material select to the list of items?  For example, if a user were to look for "orange" in the list: red, blue, green; is there a way to include a button to allow the user to add "orange"? My approach would be to pick up the value, destroy the material select, add the new option to the underlying option list as selected, and then re-initialize the list.  However, I really don't want to modify the MDB.js files to include the control; so I'm asking if there is a better way before I create a modification that will need to be tracked through MDB version changes. EDIT - My solution to keep the project moving... OK, I have something working...  grains of salt and all of that...
//MDB MaterialSelect add non-existing items shim...
$(document.body).on('click', 'button.mdb-select-add-btn', function () {
    var searchInput = $(this).parent().find('input.search');
    var searchValue = searchInput.val();
    var matsel = $('#useApplicationPicker');
    matsel.material_select('destroy');
    $('option:selected', matsel).removeAttr('selected');
    matsel.append('<option value="$NVCREATED$_' + searchValue + '" selected>' + searchValue + '</option>');
    matsel.material_select();
});
To get my button with the class "mdb-select-add-btn", I updated the MDB.js and MDB.min.js files with: LINE: 20678 FROM:
this.$searchInput = $('<span class="search-wrap ml-2">
<div class="md-form mt-0">
    <input type="text" 
           class="search form-control w-100 d-block" 
           placeholder="' + placeholder + '"></div></span>');
TO:
this.$searchInput = $('<span class="search-wrap ml-2">
<div class="md-form mt-0">
    <input type="text" 
           class="search form-control w-75 d-inline-block" 
           placeholder="' + placeholder + '">
    <button type="button" 
            class="mdb-select-add-btn btn btn-sm btn-default">add</button></div></span>');
  I will have to handle the provided values, but that won't be a big deal.  

Sebastian Kaczmarek staff answered 6 years ago


Currently, we do not have such a feature. We will consider adding an option to add custom callbacks and controls to the Material Select. Your approach is correct, except that since the version 4.5.9 there is absolutely no need to manually destroy and re-render the Material Select. It is handled by itself. Also, the old .material_select syntax has been replaced by the new .materialSelect. The old one is still working but it will be removed soon.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Computer
  • Browser: Latest Firefox
  • OS: W10
  • Provided sample code: No
  • Provided link: No