Change Dropbox style to Autocomplete Selection

[jerkski]

Hello, I would like to try to make the dropdown selection process more powerful, such as this: http://loopj.com/jquery-tokeninput/. This seems to be a more accessible way to allow for using a dropdown and having multiple selections.

Could you make any recommendations for integrating this? Or is there an existing way that has already been done?

[support]

Hi,

I’ve attached a form you can import that makes a little trick to help you with mutliple choices for dropdown selection. It is not exactly what you want but it’s probably the easiest way to do it staying in the quform boundaries. I’ll have a look into this.

Regards,

Félix

Attachments:

You must be logged in to view attached files.

[jerkski]

Hi Felix, thank you for the suggestion. I am looking to improve upon the existing process to make it easier for users and to reduce the amount of scrolling required in a dropdown with many options, and when there are many options and they select more than one, this would make it easier to review selections prior to submitting. In my example, my single dropdown has about 50 options. Out of those, users normally select upwards of 6-8 at a time. What is confusing is for the users to review which ones they chose. They are forced to look through the long list again to see which they control+selected.

I still would like to research integrating the above method I posted in the link, but my developer and I do not know where we can get the Quform stored labels/values from for the dropdown options. In other words, we would like to build the dropdown as usual in Quform along with the labels/values we set in Form Builder, but use some jQuery and styling to alter the functionality and appearance of the dropdown. Does this sound possible?

[jerkski]

Based on my above comment, we are trying to figure out if when I create a form in Quform, are the form field labels and values stored in the database? How can I access these in an external script?

[support]

Hi,

We’re having a look into this for you. Is it acceptable for you to get values from a hardcoded list or you really want to get it from the database ?

Regards,

Félix

[jerkski]

To me it doesn’t matter. It seems like most of these jquery scripts include an ability to fetch the values and labels from a db or Json. My programmer might prefer that since it is standardized. I was originally thinking that they could be passed on to the script when the form loads via a function in an array, and we could access that way. Normally to get actual submitted data, we add some code to the functions.php, add an HTML element to alter to look and functionality of the data being displayed.

So that’s where I’m stuck. How do I access the labels and values of an existing dropdown element. Any way you could help, I’d appreciate it. Whichever method makes more sense for quform is what I’ll use. Once you get you get us going, I’ll have my programmer share his code here as I feel it would be a nice addition to quform, to make more dynamic, angular type elements.

Thanks Felix!

BTW – This looks to be a better option for jquery dropdown with autocomplete: https://harvesthq.github.io/chosen/

[support]

Hi,

This jQuery dropdown from Harvest is a lot easier to include. Just add these on your page, the way it works for you.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.iphorm_12_1').attr('multiple',true);
    $('.iphorm_12_1').attr('name','iphorm_12_1[]');
    $('.iphorm_12_1').chosen({placeholder_text_multiple: "Your Placeholder"});
});
</script>

You’ll see that I changed the name of the element to get an array and get all the options selected instead of just one. Also, I added the file via CDN but you can upload directly to your server. I’ve tested it by adding to the forms in an html element, but probably not the best way if for production.

Let me know if it works on your side,
Regards,

Félix

• This reply was modified 7 years, 5 months ago by support.

[jerkski]

Felix! This is fantastic!! I found that I needed to add a blank option to the dropdown to force Chosen not to prepopulate with anything. Otherwise, it always preselected the 1st option in the dropdowns options, even if it was not set as the default. Also, I found I had to disable Uniform to get this to work.

Fantastic work!! Honestly, I wish Quform would adopt better styling and functionality like this. What you have done with Quform is nothing short of amazing, and I think you could create an even more dynamic product!

[jerkski]

Hi Felix, do you know if there is any way to get this to work in the uniform theme?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[jerkski]

Hi all, I know this is an old topic, I see you said you will be adding Chosen as an option. That’s great! I do have one question in the meantime, I have been using the above code for a while now and it works great. the only problem is when I use ajax refresh after submit, the chosen field does not reset. Is there a way to add in a reset to the submit function to cleat this field?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[jerkski]

Thank you Ally! When will chosen become an official feature in Quform?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts