Feature Request: Bootstrap Modal Search Pop-up

[tschneideriii]

I'm looking for either direction on creating a new Plug-in or adding to the core. Like the DatePicker plugin you can change the input, the Popup input would let you click an "Add" link that pop ups a Modal. You would do something in the modal then return the selected value back to the QueryBuilder. You could click the "Add" button multiple times to add multiple items.

For example, when selecting the PopUp plugin, you'd see a 'Add' link:

Clicking the "Add" link, I'd see a Modal, where I could do some Ajax search. In this example, I'm searching for Blue colors. I would click on the + sign to close the Modal and add my selection would go to the Query builder

This would be after I clicked on the plus sign next to Blue, It would show that I've selected Blue and Yellow with the option of removing them with the X.

I hope this example explains what I'm looking do add to your plugin.

[mistic100]

You can either provide your own input template, see the "Corrdinates" input on this demo

jQuery-QueryBuilder/examples/index.html

Lines 445 to 504 in 48e1f09

	{
	id: 'coord',
	label: 'Coordinates',
	icon: 'glyphicon glyphicon-star-empty',
	type: 'string',
	default_value: 'C.5',
	description: 'The letter is the cadran identifier:\
	<ul>\
	<li><b>A</b>: alpha</li>\
	<li><b>B</b>: beta</li>\
	<li><b>C</b>: gamma</li>\
	</ul>',
	validation: {
	format: /^[A-C]{1}.[1-6]{1}$/
	},
	input: function(rule, name) {
	var $container = rule.$el.find('.rule-value-container');
	$container.on('change', '[name=' + name + '_1]', function() {
	var h = '';
	switch ($(this).val()) {
	case 'A':
	h = '<option value="-1">-</option> <option value="1">1</option> <option value="2">2</option>';
	break;
	case 'B':
	h = '<option value="-1">-</option> <option value="3">3</option> <option value="4">4</option>';
	break;
	case 'C':
	h = '<option value="-1">-</option> <option value="5">5</option> <option value="6">6</option>';
	break;
	}
	$container.find('[name$=_2]')
	.html(h).toggle(!!h)
	.val('-1').trigger('change');
	});
	return '\
	<select name="' + name + '_1"> \
	<option value="-1">-</option> \
	<option value="A">A</option> \
	<option value="B">B</option> \
	<option value="C">C</option> \
	</select> \
	<select name="' + name + '_2" style="display:none;"></select>';
	},
	valueGetter: function(rule) {
	return rule.$el.find('.rule-value-container [name$=_1]').val()
	+ '.' + rule.$el.find('.rule-value-container [name$=_2]').val();
	},
	valueSetter: function(rule, value) {
	if (rule.operator.nb_inputs > 0) {
	var val = value.split('.');
	rule.$el.find('.rule-value-container [name$=_1]').val(val[0]).trigger('change');
	rule.$el.find('.rule-value-container [name$=_2]').val(val[1]).trigger('change');
	}
	}
	}]

Or create you own complete jQuery plugin.

Both solutions are show on the demo https://querybuilder.js.org/demo.html#widgets