editableGridUser

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 user input field:
<input type="text" class="userSearchField" />

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

</script>

CSS

.eguser-pointer {
  cursor: pointer;
}

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


/*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() {
  $(".userSearchField").editableGridUser({
    searchItemName: "CRM Users",
    delaySearch: 500,
    placeholder: "Search for user",
    searchUrl: "https://api.github.com/search/repositories",
    primaryKeyColumn: "id",    
    onSelectItem: function(dataItem, inputField) {
      alert("Selected user primary key: " + dataItem["id"])
    }
  });


}


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

For now the JSON must look like this
[
	{"id": 102920, "fullName": "ADMINISTRATOR"},
  {"id": 101231, "fullName": "JOHN DOE"},
]

*/

(function($) {

  var dialogHtml = `
<div class="editableGridDialog-dialog">
  <div class="editableGridDialog-header">
    <h4>Search for <span class="eguser-searchitem"><span></h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">
    <div class="input-group">
  		<input type="text" class="form-control eguser-searchbox" placeholder="">
  		<span class="input-group-addon"><i class="fa fa-search eguser-icon"></i></span>
		</div>
    <div class="eguser-table-container">
    	<div class="eguser-table">
      </div>
    </div>  
    <div style="text-align: right; padding-top: 8px;">
    	<button type="button" class="btn btn-primary eguser-btnclose">Cancel</button>        	
    <div>
    
</div>`;

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

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

  function createGrid(options) {
    $(".eguser-table", dialog).empty();
    var gridHtml = $(`
    	<table class="table table-hover">      	
        <tbody></tbody>
      </table>
    `);
    
    $(".eguser-table", dialog).append(gridHtml);
    return gridHtml;
  }

  function addSearchResultToGrid(options, grid,...