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
Related
Is there a way to achieve a filter with two or more inputs for the same column/data-field?
Example (think about Forename and Surname but the column you want to filter has both included): https://live.bootstrap-table.com/code/chsteiner/10891
It works but the input fields get messed up in the process.
This new feature was recently added. You can see the Fix/Feature in GitHub
You will now be able to filter by more than one value in the same column using a delimiter. The release should occur soon.
I am new to AngularJS and writing an AngularJS application with four drop down (select) acting as the search criteria to filter the search result.
Each drop down is populated by a field from the search result.
Though, some of the dropdown fields are not displayed in the search result.
The expected logic is as follows:
1.On page load, you display the 4 dropdown and underneath the unfiltered results say, 10 rows
2.On change of dropdown A, the associated filter is applied to the JSON result and result is refreshed and automatically displayed
3.The last selected dropdown option is retained each time
4.On change of dropdown B, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
5.On change of dropdown D, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
6.On change of dropdown C, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
So, the dropdown can be selected in any order and there is a cummulative filtering
Also, if no result is returned by filter combination, a message is displayed.
I have a solution for one drop down, but cannot implement multiple drop down filter on same json data.
My solution was based on the following filter data using dropdown?, which as a plunker.
Any help will be very much appreciated.
You can pass an Object as the parameter to your filter expression, as described in the API Reference here http://docs.angularjs.org/api/ng.filter%3afilter. This object can selectively apply the properties you're interested in, like so:
<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
Here's a Plunker : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
The plunker works for input tags, hence it will also work for select tags with few modifications.
Disclaimer : Plunker Not Created By Me
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.
I have the following ui scenario:
Need to create a ui with three inputs to allow the user to enter his/her favorite movies. Those inputs will be always three except that they were populated previously, or except that the user uploaded three movies and he/she is coming back to see the list.
So:
Case 1: The user doesn't have any data stored. So there should be three inputs, not generated with hg-repeat, but bounded to the model.
Case 2: The user has less than two (out three) movies loaded. Two inputs can be generated with hg-repeat, but the last one it must be shown.
Case 3: The user has three inputs filled, the ui must generate a four -empty- blank input to allow the user to continue adding his/her favorite movies.
Which is the best approach with angular to achieve this?
Thanks so much in advance,
Guillermo
In each case, you should use a ng-repeat. And I would do something like this :
create an object to store the value
movies={movie1:undefined, movie2:undefined, movie3undefined}
Pre-fill this object with user loaded movies if any
create your ng-repeat
<li ng-repeat='movie in movies'> with you input binded to movies : <input ng-model='movies[movie]'>
You can also create a last li item with a ng-if testing if the 3 values are filled and then adding a fourth input.
How to validate the report parameters while running the report in WebViewer. I am using the eclipse to design the reports. I am using the date fields and some select boxes as parameters. But my requirement is - user should not type the date, he should select the date from date picker(jquery UI) and at select boxes I want some kind of validation at server side that is From Category select box should not be greater than To Category select box. I need to do this validation at server side with ajax calls. Is there any way to customize the dialog box to get this functionality or I should design new page to do that and link that report after validation.
I need export functionality also in my page, if i want that how to pass the selected parameters(Export Format, Pages, Auto) to report.
1 Validate Selectbox Parameters
For the validation of your Select Parameters, you could use a Cascading Parameter Group.
First you create a Data Set that is returning the possible values for your "from Category". Then you reate a New Cascading Parameter Group and select Multiple Data Set add a new Paramter(your "from Categroy Prameter") and select the just created Data Set to display.
Close the Parameter group for now, and create a second Data Set that is returning the possible values for your "to Category". Here you can use the Input of your "from Categroy Prameter" form the just created Cascading Parameter Group to limit the results to display.
Now go back to your Cascading Parameter Group and add a second Paramter based on your second Data Set. Make sure both parameters are configured as List Boxes.
If you now select a value for your "from Category" the allowed values for "to Category" will be dynamically updated.
2 Export input parameters for export formats
To export your input parameters simply add them by drag and drop to your Report Page. Parameters can be displayed in every Expression Field with be binding params["parameterName"]. If you just want to display them for a limited kind of Export Formats (e.g. display in .xsl but hide for .html) select the visibility Tab in the Property Editor and select "hide Element" "for specific outputs..." and select the format where you want to hide the field.
3 Datepicker Input
there is no plugin that I know that is providing the Requirement to BIRT out of the box. You can edit the .jsp that is taking the input parameters but here you are on your own. I would prefere to display the Input-Format of a date e.g. dd.MM.yyyy to reduce typo errors.