I have searched the forums and tried several methods for getting long lists into an ajax-like "live search" field. There are several posts with different keywords with similar requests but I haven't seen any answers as of yet...so I'm sharing for anyone else with the same problem.
We have dynamic dropdown fields created from PHP lookup to data stored in the J! database. RSForms makes it very easy to build dynamic HTML Select/Option lists. In our case some of our lists are not intuitive enough for users to locate what they are looking for. Sure, HTML Select fields allow you to start typing, but it works from the beginning of the option values.
Of course we've all seen the Ajax content search features available, and that's what I wanted for my select fields.
Searching for JQuery/Ajax (?) live search fields, I found several ways to do this. I wanted a "native" approach so I wouldn't have to depend on 3rd party scripts, but there are some really nice "plugins" already written that have some nice features. I've tested a few of them. Some work but I had some conflicts within the structure of the styles and js.
I had a list that I spent the last few weeks testing and ran across this article:
www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/
I ended up choosing Select2 (
select2.github.io) ... No conflicts thus far in my J! install (a bootstrap template/Gantry 5) in the current version, and this lean little tool even has ways of implementing remote data access via JSON so you can pull external list/select data from other sites or your own json apis.
These notes are for including Select2 into your form and triggering Select fields into searchable fields.
1. Modify your PHP 'on form display' script for the form to include the javascript via links. I only use this plugin within my form selectively, so I don't want this stuff loading in my template...so putting this here is just as good unless there are any suggestions. So, go to your form-->Form Properties-->Scripts/PHP Scripts-->Script Called on Form Display...
// load javascript plugin for live search select support
echo '<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />';
echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>';
2. This plugin requires that you initialize the plugin on the various select elements you want to search. While in Form Properties, go to Design/CSS and Javascript tab and in the Javascript section, add this:
<script type="text/javascript">
jQuery("document").ready(function() {
jQuery("#Field1").select2({
placeholder: "Placeholder text",
allowClear: true
});
jQuery("#Field2").select2({
placeholder: "2nd field palceholder text",
allowClear: true
});
});
</script>In this example I have a form with two fields named "Field1" and "Field2" ... read the Select2 documentation, but I use the HTML ID tag to locate the object since RSForms automatically assigns the HTML ID tag to the name you give the field. The class name or any other valid and unique jquery element identification will work. For example, if you wanted all select fields in your form to be searchable, in theory you could add a field attribute class="searchable" and initiate the plugin on all fields with that class using $(".searchable").select2(...)
Also note that in my PHP queries that create the dynamic dropdown field's option/values I insert a blank row in front of the items array (see RSForm's instructions for dynamic field data and select fields). If I don't do this, then the placeholder text from Select2 disappears and is replaced with my first option/value in the list. The allowClear just puts an (x) next to the selection and allows the user to click to clear the selection. Also note that the $("element selection...") doesn't work in Joomla, you have to be explicit and call it via jquery("element...").
That is pretty much it. I am using bootstrap 3 in my template and thus in my forms. So I add to the attributes ... style="width: 100%;" to force the field size to be as wide as everything else on the page. Select2 does a good job of working within your style/theme design and RSForm does a wonderful job of "merging" attributes for your field into the default application's attributes (for example, if you add something like class="myclass" to the attribute of a field, RSForms is smart enough to simply add the new class or style attributes to the existing rsform classes).
Also note you can also use data elements in your field attributes for this Select. So you could add something like this to your attributes area of a Select field: data-placeholder="Your placeholder text" data-allow-clear="true" instead of specifying those options in the javascript section.
I have tested multi-select fields as well and it works great. Just change the RSForm field setting to Multiple to Yes and you're good to go.
I would like to have a new Select field as an option in RSForm like "Select (searchable) with the script embedded on the form once if needed with some of the plugin's options in the RSForm controls, but I'm not sure how to do that yet...anyone?
