Replace the select2 dropdown boxes

[briri]

Create plan: edit field/combo box. Investigate a better input mechanism. Difficult for accessibility challenged users to use. Though does pass accessibility review.

[briri]

going to replace with the jquery option recommended by @JEK-III
https://a11y.nicolas-hoffmann.net/autocomplet-list/

[briri]

@JEK-III @sjDCC @stephaniesimms here is a screenshot of what the jquery dropdown looks like right now. Let me know if I should tweak any of the fonts, colors, etc.

Note that the search it uses does a 'contains' style search so I can type 'Tech' and get 'Tampere University of Technology'. Its also case insensitive 👍

[stephaniesimms]

@briri omg it looks so much better! i think the font style and size should be as close as possible to matching those on the rest of the page ("Select the primary research org..."), but maybe @JEK-III can confirm.

[JEK-III]

I agree with Stephanie in terms of consistency, and also that this is already a huge improvement.

I do have a some of specific suggestions about the layout, but nothing critical– if anything is going to be too time-consuming, don't sweat it.

I'd style the clear field [X] buttons a little differently– using the font awesome times-circle icon or something similar. And, the proportions of the button are weird (too narrow), but I think the best thing would be to get rid of the border and shadow altogether and just have the icon. Finally, to cut down on clutter, if would be nice to hide the button entirely when the text entry field is blank.

The suggestion text in the dropdown feels pretty cramped; it could use 10 to 20px of padding all around. If possible, it would also be great to fix the width of the dropdown to be the same as the text entry field.