Multi select Dropdown with filter - javascript

I have a requirement where in I have to create a multi select drop down where the elements can be searchable and the count of selected items should be displayed upon selection.
I have found the partial part of the requirements at this link
But not sure how to make the drop down collapsible and expandable
Wire frame image as below
Has anyone come across and worked on such requirements?

Well it depends also a bit if you are using plain Javascript or if you are also using a Framework like Angular/vue/ember or so
here is one component that looks like it makes what you want
http://selectize.github.io/selectize.js/

Related

How to show multiple value in jQuery autocomplete?

I am trying to design a multi-column select/search box as the one shown below.
I thought about using jQuery-UI Autocomplete widget. I will make the list appear in focus so the user can select directly from the list or start typing in the search box to filter the data shown.
I know I can feed the Autocomplete an array of objects as the source and decide a label to be shown as the selected item when the user selects a row.
What I want is to show more than two columns on the list. Any idea how to accomplish that?
thanks,
Use autocomplete renderItem to customize your search results. For multiple column view, use html code in rendering to render table like view. And then use this library to render html in autocomplete UI.
I ended up using typeahead.js from twitter.
Paired with the bloodhound engine it gives the ability to specify costume templates for the list.

Easy Way to Batch Edit in Angular UI Grid

Angular UI Grid currently allows for double-clicking on fields for editing, but you can only do this one at a time. Currently, I need a user to click on a button and then have all rows show the editable input fields. I was unable to find a solution online and am now posting a question here.
Anyone else have a current or easy hack for this before I have to start customizing the UI grid library (something I don't want to do yet)?
Thanks!
It is plausible to do this by providing a custom cellTemplate where that template is the editableTemplate, or quite a bit of the editable template. This would mean the edit widgets were shown at all times.
Having said this, the reason that ui-grid doesn't show all the widgets at once is performance. When you have a table you tend to render a lot of DOM elements, and slower devices cant' reasonably render and scroll that many DOM elements. You may also get issues with row virtualisation - you may end up with your editors pointing to the wrong elements in the data.
Is editOnFocus perhaps an option for you?
So what i did is, i used an ng-show directive on cell template to show and hide text box by setting an attribute on entity object of ngRow. By default edit will be false. when you press edit button its is made as true and the text box will appear.
Please find the following plunker for your requirement
http://embed.plnkr.co/tdtCbI8pw6mdSjG4SflP/preview
Hope this helps!!!!!!

Javascript combobox with typeahead and hierarchical items

I want to create a combobox with a hierarchical list of items. I need to be able to select the parent items as well as the children individually. I also need to be able to provide typeahead capabilities for this combobox.
For example, I want to make a combobox with this data in JS:
Canada
--Ontario
--Quebec
USA
--Massachusetts
--Ohio
--Texas
From this dropdown I want to be able to select any of the provinces/states individually. I also want to be able to select "Canada" without selecting it's children.
I've tried Select2 and have been digging around JQuery UI to see if it is possible, but so far I can't quite achieve the behaviour I need. I'm writing this page using bootstrap, but the given typeahead in boostrap doesn't seem to work with comboboxes at all (that I can see).
You can use Chosen javascript plugin to achieve this.
http://harvesthq.github.com/chosen/
You can store custom JS objects for each typeahead result so that it can displays and store more than just a string (a type, or ID for example). Using that would let you have different logic for country vs province/state. Here's an example of doing so:
https://github.com/twbs/bootstrap/pull/3682
So in the updater function, you could have logic based on your custom object to determine whether it's a parent or child that was clicked.
As far as making the parent look different than the child, I haven't used it myself, but there is a templating system in bootstrap. Check out this link for an example:
https://github.com/twbs/bootstrap/issues/2441
You could likely use this to differentiate the parent and child look and feel.

Recursive Drop Down Image Selection?

I'm trying to create a product page layout that allows a customization of a product. Basically, a series of drop downs with each successive drop down populated with options based on what has been selected so far. So like this:
Drop down 1: Product Variant (user selects productvariationb, drop down 2 then is populated with options for productvariationb).
Drop down 2: Product color (user selected productvariationb in drop down 1, now that they select "brown" in drop down 2 the image should change to a brown version of productvariation b).
And so on, with the image changing (and options populating) each time according to what has been selected.
Can I do this with JS and does anyone know of a script similar that I can edit, or what functions of JS I need to look into to accomplish this?
Here I made you this : http://jsfiddle.net/moeishaa/H9fF2/
It is working with jQuery. Play with it and let me know if this helped :-)
I know it looks very static but you can render the drop-down on page load and populate the options object as well. I am sure you can find plug in and add-ons. This is a very short amount of code and can be customized.
I think the best resource for example code would be looking at some JavaScript or JQuery examples on creating expandable menus (more specifically ones that mimic folder structures). They usually operate by decorating an unordered list.
You could create a static unordered list and have the image change based on what item you are hovering over. Alternatively, you could use some AJAX to dynamically populate additional parts of the list as you hover over different levels. Both of those would most likely be easily accomplished with JQuery. Here's a page with some menu examples that might give you some ideas:
JQuery Navigation Menus

Auto populate combobox

IN my case i want to implement multi select auto complete combobox using html,javascript.
Is there any body who knows how to implement it.
Which will be similar to text field shown in stackoverflow while adding multipal tags to any question.
If you are talking about multiple drop down boxes that are linked, so that the selection in the first drop down menu determines the possibilities in the next, then the ASP.NET Toolkit has a nice cascading drop down sample. This will only, of course, come in handy if you are programming in ASP.NET. I would not recommend trying to reverse engineer the solution.
What do you mean by auto populate?
If you want to populate the drop down box dynamically you can just use a normal HTML Select tag and use Ajax to fetch the list of values to be shown in the drop down

Categories