MTselect

by Muhammad Hamza Khan

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
  <form class="form-horizontal well" role="form" method="POST">
    <div class="form-group">
      <div class="controls component-mt-select" data-mt-max-tags="1" data-mt-request-url="">
        <input type="text" id="Author" class="form-control" name="author" data-mt-filter-control/>
        <label class="control-label" for="Author">Author</label>
        <div style="clear: both"></div>
      </div>
    </div>
  </form>
</div>

CSS

form {
  margin-top:50px;
}
.mt_search_list_container {
  z-index: 9999;
  position: relative;
  border: 1px solid #eeeeee;
  border-top: 1px solid #3498db;
  background: #fff;
  width: 220px;
  max-height: 200px;
  display: block;
  overflow-y: scroll;
}

.mt_search_list_container .mt_entry_container {
  padding: 10px;
  padding-bottom: 0;
  min-height: 50px;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.mt_search_list_container .mt_entry_container:not(.inactive):hover,
.mt_search_list_container .mt_entry_container.active {
  background: #3498db;
  color: #eeeeee;
}

.mt_search_list_container .mt_entry_container img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.mt_search_list_container .mt_entry_container .left {
  position: absolute;
}

.mt_search_list_container .mt_entry_container .right {
  margin-bottom: -10px;
  margin-left: 50px;
}

.mt_search_list_container .mt_entry_container .right .name {
  color: #616161;
  font-size: 12px;
  font-weight: 400;
  margin-top: 3px;
  margin-bottom: 0;
}

.mt_search_list_container .mt_entry_container .right .description {
  color: #929292;
  font-size: 10px;
  font-weight: 400;
  margin-top: 1px;
  margin-bottom: 0;
}

.mt_search_list_container .mt_entry_container:after {
  clear: both;
  visibility: hidden;
  content: '.';
}

.mt_search_list_container .mt_entry_container:not(.inactive):hover .right .name,
.mt_search_list_container .mt_entry_container:not(.inactive):hover .right .description,
.mt_search_list_container .mt_entry_container.active .right .name,
.mt_search_list_container .mt_entry_container.active .right .description {
  color: #eeeeee;
}

.mt-tag-container .mt-tag-element {
  font-weight: 300;
  font-size: 15px;
  border: 1px solid #3498db;
  padding: 0 10px;
  color: #3498db;
  margin-right: 15px;
  float: left;
  margin-top: 5px;
 ...

JavaScript

var jQueryMTSelect = {

  elementInformationMAP: {
    tagContainer: {
      'element': 'span',
      'class': 'mt-tag-container'
    },
    tagElement: {
      'element': 'span',
      'class': 'mt-tag-element'
    },
    tagElementRemove: {
      'element': 'a',
      'class': 'none',
      'content': 'X'
    }
  },

  skeletonStructure: {
    'default': {
      entryInformationListHTMLSkeleton: '<div class="mt_search_list_container">' +
        '{entries_information_list}' +
        '</div>',
      entryInformationSingleContainerIdentifier: '.mt_entry_container',
      entryInformationHTMLSkeleton: '<div class="mt_entry_container addTag" data-tag-id="{id}" data-tag-name="{name}">' +
        '<div class="left">' +
        '<img src="{picture_path}"/>' +
        '</div>' +
        '<div class="right">' +
        '<p class="name">{name|boldSearch}</p>' +
        '<p class="description">{description|boldSearch}</p>' +
        '</div>' +
        '</div>',
      responseMessageSkeleton: '<div class="mt_search_message">{message}</div>'
    }
  },

  entryInformationListHTMLSkeleton: '',
  entryInformationSingleContainerIdentifier: '.',
  entryInformationHTMLSkeleton: '',
  responseMessageSkeleton: '',

  triggerInformationMAP: {
    searchTriggerIdentifier: ':input[data-mt-filter-control]',
    searchTriggerEvent: 'keyup focus',
    searchTriggerMinimumLength: 3,
  },

  namespace: 'mt_search',
  containerObject: {},
  tagContainerObject: {},
  requestURL: '',
  requestMethod: 'POST',
  requestSearchedTerm: 'mt_filter',
  requestSelectedTerms: 'mt_selected',
  requestExtraParams: {},
  closeModalOnSelect: 1,
  clearInputOnSelect: 1,
  maxTags: false,
  defaultValues: [],
  tagInputType: 'hidden',
  tagInputName: 'tag',
  closeOnUnFocus: 1,
  skeleton: 'default',

  _currentAJAXRequestObject: false,

  Init: function(container, settings) {
    this._handleSettings(settings);
    this.containerObject = container;

    this.ModalHelper = this.ModalHelper.Init(this);
   ...