editableGridMultiselect

by riaanc

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://jsfiddle.net/riaanc/e67st5mg/7/show_js/"></script>


My editable grid multiselect field:
<br/>
<input type="text" class="multiselectField" />

<script>
  $(function() {
    RunDemo();
  });

</script>

CSS

.egmultiselect-pointer {
  cursor: pointer;
}

.egmultiselect-table-container {
  height: 400px;
  overflow-y: auto;
}

.egmultiselect-item {
  border-radius: 4px;
  margin: 2px;
  padding-left: 5px;
  cursor: pointer;
}

.egmultiselect-item.eg-selected {
  background-color: #c1e3ff;
}

.egmultiselect-item:hover {
  background-color: #ccc;
  border-radius: 4px;
}

.egmultiselect-item.eg-selected:hover {
  background-color: #88c9ff;
}


/*FROM OTHER JSFIDDLE*/

.editableGridDialog-backdrop {
  display: block;
  opacity: 0.2;
  background-color: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
}

.editableGridDialog-dialog {
  background-color: white;
  color: rgb(51, 51, 51);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 800px;
  border-radius: 5px;
  text-align: left;
  position: fixed;
  left: 50%;
  top: 40%;
  margin-left: -400px;
  margin-top: -200px;
  overflow: hidden;
  z-index: 99999;
  display: none;
}

.editableGridDialog-header {
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.editableGridDialog-header h4 {
  margin: 0;
  line-height: 1.42857143;
}

.editableGridDialog-body {
  padding: 15px;
}

JavaScript

//------------- DEMO USAGE ---------------
function RunDemo() {
  $(".multiselectField").editableGridMultiselect({
    dialogTitle: "Document Type",
    dataUrl: "https://api.github.com/search/repositories?q=jdfkjklfd",
    onSuccess: function(selectedIDs, inputField) {
      alert("Selected item IDs: " + selectedIDs.join(","))
    }
  });

}


//-------------------COPY FROM HERE TO END -----------------------
/* editableGridMultiselect
Run a jquery selector on a plain text input field. 

JSON Format:
{
	"items": [
    {"id": 94389, "text": "Item 1 Text"},    
    {"id": 36321, "text": "Item 2 Text"},    
  ],
  selectedItems: [94389, 36321]  
}
*/

(function($) {

  var dialogHtml = `
<div class="editableGridDialog-dialog">
  <div class="editableGridDialog-header">
    <h4>Search for <span class="egmultiselect-dialogTitle"><span></h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">    
    <div class="egmultiselect-table-container">
    	<div class="egmultiselect-table">
      </div>
    </div>  
    <div style="text-align: right; padding-top: 8px;">
			<button type="button" class="btn btn-primary egmultiselect-btnok" style="margin-right: 10px;">Save</button>  
			<button type="button" class="btn btn-default egmultiselect-btnclose">Cancel</button>        	
    <div>
</div>`;

  var dialog = $(dialogHtml);
  $(".egmultiselect-btnclose", dialog).click(function() {
    $(dialog).editableGridDialog('hide');
  });

  function setOptions(aObj, aOptions) {
    $(aObj).data("egmultiselect.options", aOptions);
  }

  function displaySelectOptions(aData, aOptions, targetObj) {
    $(".egmultiselect").empty();

    $(".egmultiselect-table", dialog).empty();
    var parentDiv = $(".egmultiselect-table", dialog);

    $.each(aData.items, function(idx, itm) {
      var itemDiv = $("<div class='egmultiselect-item'></div>");
      $(itemDiv).text(itm.text);
      $(itemDiv).data("egmultiselect.itemid", itm.id);
     ...