tagsinput.js

$('input.tagsinput').each(function(key, el) {
	// prevent form from submitting by pressing 'enter'
	el = $(el);
	$('form').bind("keyup keypress", function(e) {
		var code = e.keyCode || e.which;
		if (code  == 13) {
			e.preventDefault();
			return false;
		}
	});

	// set up tagsinput options
	var options = {
		itemValue: 'value',
		itemText: 'output'
	};
	if(el.attr('id') == 'join') {
		options.allowDuplicates = true;
		options.onTagExists = function(item, $tag) {};
		options.tagClass = function(item) {
			switch(item.type) {
				case 'property':
					return 'label label-info'; break;
				default:
					return 'label label-default';
			}
		};
	}
	if(el.attr('id') == 'where') {
		options.allowDuplicates = true;
		options.onTagExists = function(item, $tag) {};
		options.tagClass = function(item) {
			switch(item.type) {
				case 'operation':
					return 'label label-warning'; break;
				case 'conjunction':
					return 'label label-danger'; break;
				case 'function':
					return 'label label-primary'; break;
				case 'property':
					return 'label label-info'; break;
				default:
					return 'label label-default';
			}
		};
	}
	if(el.attr('id') == 'order') options.tagClass = function(item) {
		switch(item.type) {
			case 'asc':
				return 'label label-info'; break;
			default:
				return 'label label-default';
		}
	};

	// init tagsinput
	el.tagsinput(options);

	// init typeahead
	el.tagsinput('input').typeahead({
		valueKey: 'output',
		limit: '15',
		remote: {
			url: '/report/'+el.attr('id')+'Query.json?query=%QUERY',
			replace: function(url, uriEncodedQuery) {
				var uri = '/report/'+el.attr('id')+'Query.json?query='+uriEncodedQuery;
				if($.inArray(el.attr('id'), ['from']) < 0) uri = uri+'&from='+encodeURIComponent($('#from').val())+'&join='+encodeURIComponent($('#join').val());
				if($.inArray(el.attr('id'), ['where']) >= 0) uri = uri+'&where='+encodeURIComponent($('#where').val());
				return uri;
			}
		}
	}).bind('typeahead:selected', $.proxy(function (obj, datum) {
		this.tagsinput('add', { 'value': datum.value.replace(/\\\\/g, '\\'), 'output': datum.output, 'type': datum.type });
		this.tagsinput('input').typeahead('setQuery', '');
	}, el));

	if(el.prev('label').find('i.glyphicon-question-sign').length > 0) {
		// this element has a hint modal and it's url may be subject to change
		var hintLink = el.prev('label').find('a');
		hintLink.click(function(e) {
			if(hintLink.attr('href').indexOf('?') > -1) {
				hintLink.attr('href', hintLink.attr('href').substring(0, hintLink.attr('href').indexOf('?')));
			}
			var uri = '?';
			if($.inArray(el.attr('id'), ['from']) < 0) uri = uri+'&from='+encodeURIComponent($('#from').val())+'&join='+encodeURIComponent($('#join').val());
			if($.inArray(el.attr('id'), ['where']) >= 0) uri = uri+'&where='+encodeURIComponent($('#where').val());
			hintLink.attr('href', hintLink.attr('href')+uri);
		});
	}
});

var modal = $('#hint-modal');

modal.on('loaded.bs.modal', function() {
});
modal.on('hidden.bs.modal', function() {
	// clear data when modal is closed
	$(this).removeData('bs.modal');
	$(this).find('.modal-body').html('<img src="/_Resources/Static/Packages/MyCompany.MyApplication/Images/loading.gif" alt="Loading...">');
	$(this).find('.modal-header').find('h3').html('Wird geladen...');
});