CODEWITHSUNDEEP
javascriptjqueryjquery-uiuser-interface
Happy
Happy

Reputation: 73

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:

  1. The box will contain 2 different text-aligns making two neat rows.(see picture)
  2. At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)

*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?

Upvotes: 1

Views: 232

Answers (2)

Anurag Uniyal
Anurag Uniyal

Reputation: 88777

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

Upvotes: 1

Jeremy Battle
Jeremy Battle

Reputation: 1638

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.

Upvotes: 0

Related Questions