Options

• ajax
  • listUrl string ""

    The search url/JSON data source.

  • getUrl string ""

    The url for a JSON data source for record details.

  • templateUrl string options.templateDir + options.theme + "/row.html"

    The url to the row template.

• Language
  • noValueText string - No Value Required -

    No value required text.

  • buttonText string - Please Select -

    Text for button when nothing selected.

  • multiText string Selected

    Text for button when multiple rows are selected.

  • selectAllText string Select All

    Text for button when select all is required.

  • deselectAllText string Deselect All

    Text for button when deselect all is required.

• templateDir string /templates/advancedSelect/

  Template directory.

• theme string materialize

  The theme to use.

• viewButton Boolean false : true when getUrl is not ""

  Whether to show a view button on each row.

• viewId string value

  The key in the data object to use as the viewId to parse to getUrl.

• rowCreatedCallback Function
  

  function( JQueryHTMLObject row, PlainObject data, advancedSelectObject self ) {
  	var id = row.attr('id');
  	var options = self.options;
  
  	var canContinue = true;
  
  	if(!row.hasClass('group')) {
  
  		if(options.multiSelect){
  			/// Add row click event
  			row.on('click', {'self': self, 'id': id}, function (e) {
  				var self = e.data['self'];
  				var id = e.data['id'];
  				self.check(id);
  			});
  
  			/// Create checkbox
  			$(document.createElement('input'))
  				.attr({
  					'id': options.element.attr('id') + '-' + id + "Input",
  					'name': options.element.attr('id') + '-' + id + "Input",
  					'type': 'checkbox'
  				})
  				.on('click', {'self': self, 'id': id}, function (e) {
  					var self = e.data['self'];
  					var id = e.data['id'];
  
  					if ($(this).prop('checked') == true) {
  						$(this).prop('checked', false);
  					} else {
  						$(this).prop('checked', true);
  					}
  
  					self.check(id);
  					e.stopPropagation();
  				})
  				.appendTo(row);
  
  			canContinue = false;
  		}
  
  		if(canContinue) {
  			/// Add row click event
  			row.on('click', {'self': self, 'id': id}, function (e) {
  				var self = e.data['self'];
  				var id = e.data['id'];
  
  				self.set(id);
  			});
  		}
  
  		if(!options.viewButton){
  			$('#button' + id).hide();
  		}else if(options.viewButton){
  			$('#button' + id).on('click', {'self': self, 'id': id}, function(e){
  				var id = e.data['id'];
  				var self = e.data['self'];
  				self.view(id);
  				e.preventDefault();
  				e.stopPropagation();
  			});
  		}
  	}
  	canContinue = null;
  }

  Function to run when row created, this can be overridden.

• ajaxCall Function
  

  function( DeferredObject defer, advancedSelectObject self ) {
  	var options = self.options;
  	/// Get select list from URL
  	ajaxExtend.create().then(function() {
  		ajaxExtend.listExecute({
  			"url": options.ajax.listUrl,
  			"type": "GET",
  			"data": null,
  			"key": 'optionsData',
  			"text": "Retrieving Data",
  			"success": function (data, textStatus, xhr) {
  				/// this call is required if overridden
  				self.ajaxGetComplete(data, xhr, defer);
  			}
  		}, options.element);
  	});
  }

  Function to run when retrieving data sources, this can be overridden.

• ajaxViewCall Function
  

  function( Integer id, advancedSelectObject self ) {
  	var options = self.options;
  	/// Get view template
  	ajaxExtend.create().then(function() {
  		ajaxExtend.setExecute({
  			"url": options.ajax.getUrl,
  			"type": "POST",
  			"data": {'id': id},
  			"key": 'getview',
  			"text": "Retrieving Details",
  			"success": function (data, textStatus, xhr) {
  				self.ajaxViewComplete( data, xhr );
  			}
  		});
  	});
  }

  Function to run when retrieving view data, this can be overridden.

• templateCall Function
  

  function( HTMLString|URLString template, PlainObject data, jQueryElement target ){															/// overrideble function to load templates
  	return templateEngine.load(template, data, target);
  }

  Function to run when loading template, this can be overridden.

• disabled Boolean false

  Whether to disabled the advancedSelect.

• multiSelect Boolean false

  Whether to enable multi-select mode.

• zeroValue Boolean true

  Whether to show results with a value of zero.

• blankValue Boolean false

  Whether to show results with a value of empty string.

• zeroSet Boolean true

  Whether to allow results with a value of zero to be selected.

• blankSet Boolean true

  Whether to allow results with a value of empty string to be selected.

• autoBuild Boolean true

  Whether to build immediately.

Attributes

Some of dataTemplates options can be set with attributes.

• disabled

  Used to disable the advancedSelect.

• multiselect

  Used to enable multiselect mode.

• build

  Used to set the autoBuild option.

• placeholder

  Used to set the language buttonText option.

• data-ajax-listurl

  Used to set the list url.

• data-ajax-templateurl

  Used to set the template url.

• data-ajax-geturl

  Used to set the get url.

Methods

• destroy

  $("#id").advancedSelect("destroy");

  Destroy advancedSelect.

• selectAll

  $("#id").advancedSelect("selectAll");

  Select all rows.

• deselectAll

  $("#id").advancedSelect("deselectAll");

  Deselect all rows.

• build

  $("#id").advancedSelect({"autoBuild": false});
  $("#id").advancedSelect("build");

  Build advancedSelect.

• setOptions

  var options = { "multiSelect": true };
  $("#id").advancedSelect("setOptions", options);

  Set options for the advancedSelect.

• reBuild

  $("#id").advancedSelect("reBuild");

  Rebuild advancedSelect with any changed options.

• _initSource

  $("#id").advancedSelect("_initSource");

  Retrieve row template.

• loadData

  $("#id").advancedSelect("loadData");

  Retrieve row data again, if the listUrl has changed.

• view

  $("#id").advancedSelect("view", value);

  Show the view template and gather data for the row with value.

• searchResults

  var data = {[ { "value": 1, "name": "first" }, { "value": 2, "name": "second" } ]};
  $("#id").advancedSelect("searchResults", data);

  Clear the results list and rebuild it with the supplied data.

• resizeResults

  $("#id").advancedSelect("resizeResults");

  Resize the results window to fit the screen.

• close

  $("#id").advancedSelect("close");

  Close the advancedSelect dialog, I'd suggest using the CSS Framework method if you want programmatically do this.

• check

  $("#id").advancedSelect("check", value);

  Activate checkbox on row with value.

• set

  var value = 1;
  $("#id").advancedSelect("set", value);

  var values = [1,2];
  $("#id").advancedSelect("set", values);

  Set the value of the advancedSelect, where the row has value or an array of values for multiSelect.

• load

  $("#id").advancedSelect("load");

  Load the selected rows in to advancedSelect dialog.

• save

  $("#id").advancedSelect("save");

  Save the currently selected checkboxes into the selected values array.

• setButtonText

  var text = "something";
  $("#id").advancedSelect("setButtonText", text);

  Set the button text.

• search

  var searchTerm = "something";
  $("#id").advancedSelect("search", searchTerm);

  Search the data results for the searchTerm string. This uses word matching, letter matching, Jaro-Winkler distance algorithm, Levenshtein distance and Levenshtein distance ratios to decide relevancy.

• clear

  $("#id").advancedSelect("clear");

  Clear the advancedSelect selected values.

• disable

  $("#id").advancedSelect("disable");

  Disable the advancedSelect.

• enable

  $("#id").advancedSelect("enable");

  Enable the advancedSelect.

• get

  var selectedArray = $("#id").advancedSelect("get");

  Returns an array containing the selected values.

• add

  var name = "third";
  var value = 3;
  $("#id").advancedSelect("add", name, value);

  var name = "third";
  var value = 3;
  var parentId = 1;
  $("#id").advancedSelect("add", name, value, parentId);

  Add a new row to the advancedSelect. ParentId is only required if you are using groups.

• remove

  $("#id").advancedSelect("remove", value);

  Remove the row with value from the advancedSelect.

• show

  $("#id").advancedSelect("show");

  Show the advancedSelect button.

• hide

  $("#id").advancedSelect("hide");

  Hide the advancedSelect button.

• displayValue

  var text = $("#id").advancedSelect("displayValue");

  Returns the disabled text currently on the button.

• focus

  $("#id").advancedSelect("focus");

  Focus on the button.

• getData

  var data = $("#id").advancedSelect("getData");

  Returns the data object currently being used.

Events

• _create

  $("#id").on("_create", {}, function(e){});

  When advancedSelect is finished being created.

• buildInline

  $("#id").on("buildInline", {}, function(e){});

  When advancedSelect buttons are finished being created.

• buildModal

  $("#id").on("buildModal", {}, function(e){});

  When advancedSelect modal is finished being created.

• selectAll

  $("#id").on("selectAll", {}, function(e){});

  When advancedSelect selectAll is finished being called.

• deselectAll

  $("#id").on("deselectAll", {}, function(e){});

  When advancedSelect deselectAll is finished being called.

• build

  $("#id").on("build", {}, function(e){});

  When advancedSelect build is finished being called.

• loadData

  $("#id").on("loadData", {}, function(e){});

  When advancedSelect loadData is finished being called.

• searchResults

  $("#id").on("searchResults", {}, function(e){});

  When advancedSelect searchResults is finished being called.

• resizeResults

  $("#id").on("resizeResults", {}, function(e){});

  When advancedSelect resizeResults is finished being called.

• rowCreated

  $("#id").on("rowCreated", {}, function(e, PlainObject obj){
  	var self = obj.self; //advancedSelectObject
  	var row = obj.row; //JQueryHTMLObject
  	var data = obj.data; //PlainObject
  });

  Function to run when row created, to be run as well as the above.

• view

  $("#id").on("view", {}, function(e, PlainObject obj){
  	var id = obj.id;
  });

  The function to run after retrieving a record details.

• setOptions

  $("#id").on("setOptions", {}, function(e){});

  When advancedSelect setOptions is finished being called.

• close

  $("#id").on("close", {}, function(e){});

  When advancedSelect close is finished being called.

• check

  $("#id").on("check", {}, function(e, PlainObject obj){
  	var self = obj.self; //advancedSelectObject
  });

  When advancedSelect check is finished being called.

• set

  $("#id").on("set", {}, function(e, PlainObject data){
  	var self = data.self;
  });

  When advancedSelect set is finished being called.

• load

  $("#id").on("load", {}, function(e){});

  When advancedSelect load is finished being called.

• save

  $("#id").on("save", {}, function(e){});

  When advancedSelect save is finished being called.

• search

  $("#id").on("search", {}, function(e){});

  When advancedSelect search is finished being called.

• submit

  $("#id").on("submit", {}, function(e){});

  When advancedSelect search input enter is triggered.

• clear

  $("#id").on("clear", {}, function(e){});

  When advancedSelect clear is finished being called.

• setButtonText

  $("#id").on("setButtonText", {}, function(e){});

  When advancedSelect setButtonText is finished being called.

• disable

  $("#id").on("disable", {}, function(e){});

  When advancedSelect disable is finished being called.

• enable

  $("#id").on("enable", {}, function(e){});

  When advancedSelect enable is finished being called.

• get

  $("#id").on("get", {}, function(e){});

  When advancedSelect get is finished being called.

• add

  $("#id").on("add", {}, function(e){});

  When advancedSelect add is finished being called.

• remove

  $("#id").on("remove", {}, function(e){});

  When advancedSelect remove is finished being called.

• show

  $("#id").on("show", {}, function(e){});

  When advancedSelect show is finished being called.

• hide

  $("#id").on("hide", {}, function(e){});

  When advancedSelect hide is finished being called.

• focus

  $("#id").on("focus", {}, function(e){});

  When advancedSelect focus is finished being called.

Examples

Default

The HTML for an inline advancedSelect, as above.

<select class="advancedSelect">
	<option value="">None</option>
	<option value="1">Left</option>
	<option value="2">Right</option>
</select>

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	blankValue: true,
	templateDir: "/templates/advancedSelect/"
});

If you do not want to allow empty choices the JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	templateDir: "/templates/advancedSelect/"
})

Groups

Inline

None Left Right Up Down

The HTML for an inline advancedSelect.

<select class="advancedSelect">
	<option value="">None</option>
	<optgroup value="a" label="Horizontal">
		<option value="1">Left</option>
		<option value="2">Right</option>
	</optgroup>
	<optgroup value="b" label="Vertical">
		<option value="3">Up</option>
		<option value="4">Down</option>
	</optgroup>
</select>

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	blankValue: true,
	templateDir: "/templates/advancedSelect/"
});

JSON Source

With data attribute

The HTML for a JSON data source inline advancedSelect

<select class="advancedSelect" data-ajax-listUrl="jsonSource.json">
</select>

The JSON for a JSON data source, this could also be returned by your server

{"results":[
	{"name":"None","value":""},
	{"name":"Left","value":1},
	{"name":"Right","value":2}
]}

The JSON for a JSON data source for groups, this could also be returned by your server

{"results":[
	{"name":"None","value":"","type":"option","parent":0},
	{"name":"Horizontal","value":"a","type":"optgroup","parent":0},
	{"name":"Left","value":1,"type":"option","parent":"a"},
	{"name":"Right","value":2,"type":"option","parent":"a"},
	{"name":"Vertical","value":"b","type":"optgroup","parent":0},
	{"name":"Up","value":3,"type":"option","parent":"b"},
	{"name":"Down","value":4,"type":"option","parent":"b"}
]}

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	blankVlaue: true,
	templateDir: "/templates/advancedSelect/"
});

If you do not want to allow empty choices the, the JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	templateDir: "/templates/advancedSelect/"
});

Without data attribute

The HTML for a JSON data source advancedSelect

<select class="advancedSelect">
</select>

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	ajax: {listUrl: "jsonSource.json" },
	templateDir: "/templates/advancedSelect/"
});

View extra data on a row

With data attribute

The HTML for a JSON data source inline advancedSelect

<select class="advancedSelect" data-ajax-listUrl="/jsonSource.json" data-ajax-getUrl="/controller/get">
</select>

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	templateDir: "/templates/advancedSelect/",
	viewButton: true
});

The output from the controller should be

{"name":"name","image":"url"}

Without data attribute

The HTML for a JSON data source inline advancedSelect

<select class="advancedSelect">
</select>

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	ajax: {
		listUrl: "jsonSource.json",
		getUrl: "/controller/get"
	},
	templateDir: "/templates/advancedSelect/",
	viewButton: true
});

Themes

Materialize (default)

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	theme: "materialize",
	templateDir: "/templates/advancedSelect/"
});

Bootstrap

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	theme: "bootstrap",
	templateDir: "/templates/advancedSelect/"
});

Custom

The JavaScript initialisation would be:

$('.advancedSelect').advancedSelect({
	theme: "themeFolderName",
	templateDir: "/templates/advancedSelect/"
});

You would then need to add a folder to the themes directory with the following files:

themeFolderName
	inline.html
	modal.html
	row.html
	view.html
			

Please see the supplied theme files for template variable locations