Develop Reference

Using Ctrl-F and searching inside a select2

Currently we have a page which has options with each section consisting of lots of checkboxes - a section might have 20 checkboxes due to each one being a separate option and then the page might have 10 sections. This takes up a lot of space and looks really messy so we experimented using select2 along with multiple option so now, by default, the space is no bigger than a text input with the added advantage that the list is searchable (when focused).
The issue is that some users have fed back that they load the page and then use ctrl-F in their browser to find the relevant setting section - using select2 (or any select based option I guess) that is no longer possible as the options are not visible on the screen.
It is something similar to the tags section at the bottom of the page - for example if I search for jQuery when focussed in the tags box it comes up but if use Ctrl-F in the browser it would not etc.
Is there a way to make the options in the select list "searchable" using the browser search without having to resort to listing them all which would then defeat the point of the change?
We had thought of displaying the options in a comma list, for example, with the same text colour as the background in a really small font but it is clunky or maybe add some sort of JS search box on the page so, whilst not using the ctrl-F route, it still makes it searchable but were curious if there was there a way we could do this via Select 2 itself or any other routes we could explore using the native browser search?

How to make a selectable list in HTML5

I am trying to mimic a listbox as what would be available in MS visual studio. I have found HTML elements
select
and datalist
The problem is that these are really for data entry. What I had in mind is to have search results shown in a list but they are selectable? I need to know the index of the item(s) chosen so I can retrieve more additional detail for a subsequent screen. The elements above are more like drop downs. I want something like a textbox with a scroll bar that allows for multi select. Is that possible for HTML5?
I know VS had a form toolbox item that did just that.
Any advice?
Thanks in advance.
Matt

pro tinkering for html select box look-alike but with extra features

This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?

You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify

You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.

Select list options with varying font-families - how to do this?

It is apparently not possible to give inividual <option> tags different font-family values. I would like to achieve this effect somehow. I've tried the jQuery selectbox plugin, but this doesn't seem to allow me to style the individual options. Can anyone suggest a solution?
Thanks

It's not 100% perfect, but this fiddle will get you 90% of the way there:
http://jsfiddle.net/Y39HQ/
Select a different item from the drop down and then switch back, you'll see the font change for the selected item.
Basically no, you can't do this with the default <select>, but the JavaScript, combined with a plugin such as selectBox is not that difficult.
Additionally, styling the individual items in the list you can manage with the css pseudo-selector nth-child(). This will allow you to style each item in the list. Naturally, if you're manually constructing the items in the drop down, it'd be a lot cleaner to just set the font at the point of creation for the list item....
Good luck!

this plugin changes the selectbox into a ul li tree, so you can set the font-family on the li's
http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

A complete DIY solution perhaps? When the element is clicked show a tag with some custom styled <li> items.

The standard HTML <select><option>...</option></select> does not allow you to change the font between options. It simply isn't possible.
The jQuery Selectbox plugin which you're using starts off with a standard HTML <select> and reskins it.
In theory, because of the reskinning, it would therefore be possible to change the font, but it appears that this plugin limits itself in this area to the standard functionality (perhaps to make it a smoother experience for users that fall-back to the standard HTML); it doesn't appear to support changing fonts.
You might want to consider an alternative plug-in. There are a large number of jQuery plugins to choose from that deal with select box functionality, so you should be able to find one that suits your needs. This one seems to support modifying the font, for example, but there are plenty of others out there too.
Hope that helps.

Drop down list with large number of words in each selection

I have an unusual situation. I have a drop down list that allows my users to select one of a number of different scenarios. My problem is that each scenario is about 100 words long. I want to show the user everything and a radio selection box would not be appropriate. What happens is that because of the very long rows my dropdown list appears so wide that it goes off the edge of the page.
Is there a way that I can split up text (I'm using C#) and add new lines so that dropdown list box contains "multi line" selections?
Hope this makes sense to you.

I don't think it's possible without some scripting. You can add width and white-space:pre-wrap to your select tag, but that only wraps the visible part. You can't, as Madmargigan suggested, use a title to show the complete string (the title won't show).
I have prepared a very basic script to demonstrate how you could do this with javascript. See this fiddle. It may give you ideas?

You cannot do this with the standard html dropdownlist. Some frameworks have workarounds for it (for instance, see ASP.NET's dropdownlist). There are also javascript libraries that offer solutions to this problem as well.