• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Browse and search Google Drive and Gmail attachments (plus Dropbox and Slack files) with a unified tool for working with your cloud files. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!



Page history last edited by Richard D. Worth 9 years, 11 months ago

Filtering includes a widget for selecting data to display: Inputs for specifying filters based on column types (or a single input for all columns), and a display of current applied filters.

The widget must communicate with the data model to indicate which rows to output, as well as indicating the current set of filters.


Reference Screenshots for Microsoft Excel 2010 Filter UI


Microsoft Excel 2010 uses a filter menu activated by a drop-down at the right of each data column header.


The built-in filter options are type-specific. Text filters:



Number filters:



Date filters:



Below these is a custom filter option that opens a custom filter dialog:



The custom filter allows at most two filters that are either combined with AND or OR. The available operators in the drop-down are

  • equals
  • does not equal
  • is greater than
  • is greater than or equal to
  • is less than
  • begins with
  • does not begin with
  • ends with
  • does not end with
  • contains
  • does not contain



Notes on Grid Filtering/Searching from 2010-Mar meeting

- data-ui-filter="string|boolean|number|..."

- Would be good to have a  way to have an external set of controls which you can use to filter

- Have an extra row with  the filter controls

- Need main function to filter, will AND multiple filters  whether on single column or multiple columns by default (can be  overidden)

 - Per column template and filter function definition

- Filter Types:

    - text (exact- or  like-match), with optional Autocomplete support, based on column content

    - boolean  (true/false, checkbox or radio button)

    - numbers (exact  match, greater-then, less-then, range)

        - if min or max,  or both, are known, offer a slider

    - date (exact match, greater-then,  less-then, range)

    - select (checkboxes for distinct column values - none  checked, show everything, otherwise display all checked matches)

    - mulit-select,  populated with values from the column


[ Select =, <, >, <=>? ]


Comments (5)

Pierre.H A said

at 1:07 pm on Mar 2, 2011

Having working for a search/filter extension for jQuery UI Autocomplete, that is flexible (you can provide the filter function you want "contain" , "begin" or "case insensitive" ect... ) and optimized for "live search" i would be glad if i could help you.

Think that here is the only thing that i'm not currently doing in the list :
- Per column template and filter function definition

Richard D. Worth said

at 2:36 pm on Mar 2, 2011

Pierre, we'd love your help, thanks for offering. Feel free to add links to this page or in comments to GitHub repos. If you want to discuss something in more than a 2000 character comment (as allowed on this page) also feel free to post to Developing jQuery UI forum and then link to the forum from here.

Pierre.H A said

at 3:44 pm on Mar 2, 2011

Warning : This is old from 7 month , I don't even know is this version is stable or if I commited a version that can't be parsed by any Javascript Parser :p
I just remember how my plug in work and that all functionalities given in demo was still working the last time i tested it.


Well i'm very very busy at the moment working on my thesis, but i will check that all demos still work and merge my work on autocomplete and the actual version of the plugin that have been patched several times since July 2010..

The plug-in is very simple with 3 options :
source : An "Iterable.

searchMethod : A function that can filter (should return a boolean) or a string (for already defined methods)

quirk : An Int , it's the minimum number of entry in the "source" to anable a mode that i've called "quirk"
As the plug in get a cache and as the plug in is optimized for live search , when this mode enabled if you type "par" if a cache for "pa" or "p" search is existing we will use it as "source".

Pierre.H A said

at 3:47 pm on Mar 2, 2011

given in *jQuery UI Autocomplete* demo

Pierre.H A said

at 3:57 pm on Mar 2, 2011

looking on line 24, it seems that i've forgot to clear the cache after setting sources,

and looking on line 24, 38 and 99; it seems that i've forgot to clear "searched string" Array when i change my search engine, add a source or set a source

You don't have permission to comment on this page.