With a standard select2 dropdown box, populated with a list of names from a database call, is there a way to search on hidden items within the search area?
Example:
Select2 box shows to end user "Charlie Watts" but actually the options value holds "Charlie Watts (22)". I want the use to be able to search for 22, but not show it by default to the end user.
TIA
Yep, you can achieve that using the formatResult and/or formatSelection methods. There's a great example of using them in the Select2 Docs: Templating.
In your format function, filter out the " (22)" part of your value and return everything before it.
On a UX note, it could be strange to see matches appear that don't give any indication as to why they match. If that doesn't matter for your use-case, carry on.
Related
I'm currently using the most up-to-date version of Select2. The select2 box is used to display a list of skills. I am trying to set the default values (for when it's opened) to contain the current skills. I have the information in proper format, I just cannot understand how to set it. The closest I've gotten is using:
//b is array containing list of user selected options
//#e1 is select2 id
for($i=0;$i<b.length;$i++) $('#e1').val(b[$i]).trigger("change");
However, this only displays the LAST option. Which I think is because I'm not allowed to set it in a loop. However I'm unsure how else to do it??
Any current solutions are invalid as of Select v2.4.0 as initSelection and .select2("val", data etc.) was removed.
Any help is appreciated.
My solution was actually very simple and avoided for loops all together.
$('#e1').select2({
//info
}).val(b).trigger("change");
val() in jQuery also accepts arrays.
We have requirement, to search for different fields using a single text box. For example, the search has to be based on three fields; Product, Brand and Place.
Initially the user will be given the below text in the textbox which cannot be modified: Product:-Brand:-Place
When user wants to search for Product, Brand and Place, he will just add values: Product:"TV"-Brand:"Samsung"-Place:"London"
When user wants to search for just Product: Product:"TV"-Brand:-Place
Can some body help me, how can be done that in jQuery or angular js?
This can be done using angular filter..
You can pass an object as the second parameter to achieve this if you can have two search fields
<div ng-repeat="friend in user.friends | filter:{name:searchNameText, age:searchAgeText}">
Otherwise you'll need to write a custom filter to use the same field for both, or pass a custom filter function as the third parameter which is described in the docs.
http://docs.angularjs.org/api/ng.filter:filter
For some prototyping reasons I am tweaking the select2 plugin, particularly the multiple selection. I need to do two things:
<option value="VAL123">This is value 123</option> The options dropdown should show option's text This is the value 123 (default behaviour), but when selected, the "select2-search-choice" should display the selected value VAL123, not the text.
If the selection is greater than 1, I need to show a custom message text, like Multiple options selected, not the options themselves. Ideally, the selection would also avoid deleting the selected option(s) from the dropdown.
I know it seems like breaking the logic of the plugin and is probably not doable with the provided API. Any hardcore Select2 experts here to help me tweak the source code on any of these issues?
Thanks!
UPDATE: The selected options are not deleted from the list, they are just marked with the ".select2-selected" class, which can be edited in select2.css to show them anyway.
You can just use the plug in as is and use the formatSelection option and give a function such as
formatSelection: function(item) {
return item.id
}
here's a fiddle forked from someone's multiselect select2 fiddle
http://jsfiddle.net/ba98G/
I have a view that is categorized by Country and then sorted by customer name - customer name is not unique (it is the list of jobs, so customers appear often). I can filter the view easily with a dropdown by country. Now I want to search inside the filtered view for customer. What's the best approach?
I don't know what the best solution would be, but what I would try is a full text search on a view. Create a query like "FIELD country contains 'us' AND FIELD username contains 'andy'". The value for country is taken from the drop down, the value for username for a text field.
Based on my trials with this kind of functionality I believe the best approach is to manipulate a scoped collection/map of UNIDS as needed and then refresh a data table or repeat control as needed. Beyond very simple requirements I have not seen a way to implement this functionality simply.
I would create a collection with all the dropdown countries and do a search in the collection
The most promising approach, but not fully happy with it yet:
- cache the countries (they don't change that often) to get a country selection
- sort the view (not categorize) by country and customer
- use a JSON datasource and a Dojo grid
- there set the search to a vector with Country and Customer
- Set exact match to false
It will start the grid at the customer but display more when you scroll down, but that's OK in my case.
I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.
I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.