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
Related
I am new to jquery and Data tables. I have a drop down when user select one value it will search the data and draw a table.This search and drawing a table both are default properties of data tables. Now i want the user can select multiple value.
And based on the multiple selection the search should happen.I did lot of search on this but didn't get any thing. Any help will be appreciate !!
In this image i have selected one value from drop down and based on that two entries are populating on table. now i want to select multiple values here in this drop down , may be using check box after that need the search should work with both selected entries.
I did this . I am posting this answer because it may be help some one.
jQuery MultiSelect is a jQuery plugin that turns a multiselect list into a nice dropdown list with checkboxes. This plugin is easy to use and very useful in web form. You need to use two library called jquery.multiselect.css and jquery.multiselect.js. if you will search examples of multi select using J query you will find many links and that will work perfect with your data tables. For search option You need to pass multiple value to the function which is constructing your data tables. See below link for details.
http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/
I'm trying to create a form that supports putting an entry into a category and then a subcategory. I'm new to programming and ror and have no idea where to start.
I'm making a database where you can enter a product type with a drop-down menu. For example: toy, make-up or glasses. I then want there to be a drop down menu below that that changes where it gets it's values depending on the entry of the above drop down menu.
For example if "toy" is chosen, the drop-down menu below gets data from a table that has values for "age group."
For "make-up," it should draw it's values from a table that has one column that has the different types of make up.
For glasses I want it to draw data from a table that has one column for "prescription."
I hope I'm being clear with what my question is. Part of being new to programming is not knowing the exact terms for things. If clarification is necessary please let me know. Any ideas will help. Thanks!
Does anyone know how can I make this http://prntscr.com/9z7pk with HTML and JS? I made this image so you can understand better what I mean.
I already have this done with 2 multiple select inputs but I don't know how can I insert in html to put the checkbox.
Thanks in advance!
If you find yourself having a lot of these complex widgets in your application you should look into a framework like extJS or other similar frameworks. It will save you headaches and will prevent you from reinventing a wheel that has been reinvented too many times already.
Unfortunately a multiple select won't let you inject tickboxes or other arbitrary content into menu items - it relies on the OS-native multi-select hotkeys (typically shift and control).
What you could try is styling both items as ol or ul lists, and the document items as li elements within them. Whenever you add an item to the right-hand list, render a new li element and update an <input type="hidden" /> with a comma-delimited list of selected items.
Depending on how you want the interaction to work, you could:
Implement add/remove buttons as depicted, requiring you to implement multi-selection in the lists yourself. A widget framework such as extJS (as zi42 mentioned) can help with this.
Put an "add" link next to all items in the left box and a "remove" link next to all items in the selection box, except for the mandatory items.
Dispose of the dual boxes and instead place checkboxes against every item in a single, unified list, excepting the mandatory items which should have a checked-but-disabled checkbox input.
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.
Does anyone know the code fogbugz uses for styling their selects? I'm interested in getting some firefox functionality (when a fixed select width is set for the select, the options width show up expanded to fit long option values).
It looks like fogbugz is using a select still, but they've added in an input that shows the current value and maintains the fixed width. I can't find the code that does all this however. It's exactly what I need.
They are using some AJAX and it is not actually a select list, it is more akin to the auto complete drop down like Google uses on its front page. YUI, jQuery UI, ExtJS, etc all have similar functionality if you are looking for a toolset.