Replace hintText with predefined list - javascript

I'm working on a project using jQuery Tokeninput. The plugin is described as such:
Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they
type to find each item.
See a working version here: http://jsfiddle.net/WGmrr/
Is there a way that I can show the entire predefined list once the user clicks the inputbox but before the user starts typing, effectively replacing the hintText that reads Type in a search term?

You could use an entirely different UX approach here and go with Harvest's Chosen plugin, using Multiple Select:
It looks wonderful, works well, and can be re-used in different contexts.

Related

How do I optimize performance for filtering in select drop down list of 5000 data using Select2 js in Internet explorer?

I have 5000 list of data which I have to show as select drop down list. I used Select2.js library to implement filter so that It would be easy to find the data to select. It worked good in google chrome but it lags in I.E to filter the data or even to enter the keywords in search box.
This is what I have now.
$('.js-example-basic-single').select2();
});
It let filter the list for each character user types in the filter box.
I changed the code so that to filter only after user enters 3 characters in filter box.
code is :
$('.js-example-basic-single').select2({
minimumInputLength:3
});
This code hide all the list data from drop down. But i do not want to hide the list at all.
I want the ability to filter and select the item but without any lag.
Which version of Select2 version are you using? With refer to this thread and this issue, it seems that this issue might be related to the select2 version, please try to use the latest version.
Besides, how do you fill data in the select2 elements? using <option> elements or local Javascript array? I think you could try to use the AJAX method to filter data.

How to use same JavaScript routine on multiple Text Field change?

In my APEX application I have some calculation routine implemented in Javascript. The input is taken from multiple Text Fields. I want the calculation routine to work each time any of those Text Fields has been changed. Using Dynamic actions, how can I share this Javascript function among multiple Text Field change actions? Preferably avoiding any CSS modifications.
You can select multiple page items when specifying your single dynamic action to fire on change. They are comma separated in the Item(s) field (clue is in the name).
Also, as mentioned in the comments above, you could use a CSS class to group your items. As for whether this is a bad thing, check out this question.
Best practice: class or data attribute as identifier
Personally, I feel comfortable using classes to allow for easy jQuery selectors and it is both very common and natively supported in APEX.

Using AngularJS' Typeahead for selecting multiple values

https://angular-ui.github.io/bootstrap/ with the Static arrays example in the Typeahead section...
If I wanted to do something like being able to select multiple states, one after the other, how would I add that into the Typeahead code? Also, is there anyway that when I click the input - it shows all the selections possible with a scroll bar?
Edit: I really like this one however it doesn't allow for multi-select: http://ghiden.github.io/angucomplete-alt/
Here is what I ended up using: https://github.com/tamtakoe/oi.multiselect
try to use chosen:
chosen at github
Chosen works very well with angular and css frameworks, because chosen only hide your original multiselect component, without affect DOM parts.

jQuery combobox that allows custom entries to be typed

I need to get this functionality: http://jqueryui.com/autocomplete/
with this interface: http://jqueryui.com/autocomplete/#combobox
As you can see, it's an autocomplete that allows me to click to drop down what auto-complete values are available, but also allows custom input.
I also need cross-browser and mobile compatibility.
Lastly, I really want to avoid a bloated package that includes hundreds of unneccessary capabilities.
This seems like it would be a common enough issue to have an available solution, but the only answers I can find are to modify jQueryUI (with instructions that seem out of date) or to use this package, with its huge set of includes:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm
Is there a single-use plugin to accomplish this sort of input?
In minimal form, I don't even need autocomplete, just a select box that allows me to type custom entries.
You can look the Chosen ComboBox, too. Link: http://harvesthq.github.io/chosen/

MVC Razor ListBoxFor customize/restrict selections

I have a ListBoxFor and the first item is All Values. I already have the list box set to allow multiple selections. I would prefer to make it so that if a user selects the All Values option they are either asked if they want to clear out all other selections (Use All Values) or keep their current selections (De-select All Values). I would be ok without the user dialog asking them what to do and just automatically clearing out selections, but that is less preferable.
At first glance it seems that Javascript/jQuery is the best route to go about for this. I wanted to check to see if anyone knew of built in functionality for ListBoxFor that does this. The other option that I see is building a custom html extension. Even with this I still only see JS/jQuery being built and auto generated.

Categories

Resources