editableGridSSA

SSA Search

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 input field:
<input type="text" class="ssaSearch" />
<br/> My other editable grid input field with different display columns and selected item format:
<input type="text" class="ssaSearch2" />
<script>
  $(function() {
    RunDemo();
  });

</script>

CSS

.egssa-pointer {
  cursor: pointer;
}

.egssa-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() {
  $(".ssaSearch").editableGridSSA({
    searchItemName: "CRM blah blah GitHub Repo",
    delaySearch: 500,
    placeholder: "Enter CRM search query here",
    searchUrl: "https://api.github.com/search/repositories",
    primaryKeyColumn: "id",
    formatSelection: function(dataItem) {
      return dataItem.name
    },
    onSelectItem: function(dataItem) {
      alert("Selected item primary key: " + dataItem["id"])
    },
    columnCaptions: [{
      "columnName": "name",
      "caption": "Repo Name"
    }, {
      "columnName": "description",
      "caption": "Description"
    }]
  });

  $(".ssaSearch2").editableGridSSA({
    searchItemName: "GitHub Repo",
    searchUrl: "https://api.github.com/search/repositories",
    primaryKeyColumn: "id",
    formatSelection: function(dataItem) {
      return dataItem.name + " - " + dataItem.owner.login
    },
    onSelectItem: function(dataItem) {
      alert("Selected item primary key: " + dataItem["id"])
    },
    columnCaptions: [{
      "columnName": "full_name",
      "caption": "Full Name"
    }, {
      "columnName": "html_url",
      "caption": "URL"
    }]
  });

}


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

For now the JSON must look like this
{
	items: [
  	{"SqlColumnName1": "SqlColumnRowColumn1", "SqlColumnName2": "SqlColumnRowColumn2", ...},
    {"SqlColumnName1": "SqlColumnRowColumn1", "SqlColumnName2": "SqlColumnRowColumn2", ...},
    ...  	
  ]
}

options.primaryKeyColumn name is used to set attribute on the input field. Use inspect on the text input to see the data-attribute. The attribute will be e.g. 'data-egssa-value="5282264"'

options.columnCaptions is an array that determines the columns which should be displayed and have the format:
[
	{columnName: "sqlColumnName1", caption: "Friendly Human Readable Caption for Column"},
  {columnName:...