Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Textbox Filter Control Settings

Textbox Filter Control

Control Settings:

Data Attribute Description Values Example
data-path jQuery path to the items jQuery path data-path=".title"
data-ignore Regular expression that defines what letters will be ignored Default value: [[email protected]#$%^&*()+=`\'"\/\\_]+ data-ignore="[^a-zA-Z0-9]+"
data-event-name Event name 'keyup', 'input' or other event; default event: 'keyup' data-event-name="keyup"
data-mode
  • contains (default option) - finds all items that contain textbox input.
  • startsWith - finds all items that start with textbox input.
  • endsWith - finds all items that end with textbox input.
  • advanced - works like 'contains', but the following logical keywords could be used:

    • && for AND
    • , for OR
    • - for NOT
'contains' (default), 'startsWith', 'endsWith' or 'advanced' data-mode="startsWith"
data-or
data-or1
data-or2
...
Used only in advanced mode described above. Allows or operator replacement. string value data-or="||"
data-or1=" or "
data-or2=" oder "
data-or3=" ou "
data-and
data-and1
data-and2
...
Used only in advanced mode described above. Allows and operator replacement. string value data-and="&&"
data-and1=" and "
data-and2=" und "
data-and3=" et "
data-not
data-not1
data-not2
...
Used only in advanced mode described above. Allows not operator replacement. string value data-not="-"
data-not1="not "
data-not2="nicht "
data-not3="non "
data-button defines a filter button; if the button is defined, the list will be filtered by button click jQuery path to the button data-button="#button-id"
data-type defines a clear textbox button clear data-type="clear"
data-typing-start defines typing start callback function function name; the function is defined by user and should be placed in jQuery.fn.jplist.setting namespace data-typing-start="startTyping"
data-typing-end defines typing end callback function function name; the function is defined by user and should be placed in jQuery.fn.jplist.setting namespace data-typing-end="endTyping"
data-typing-delay defines typing delay if typing callback function are used numeric value data-typing-delay="1000"

General Settings:

Data Attribute Description Values Example
data-control-type="textbox" panel control type definition 'textbox' data-control-type="textbox"
data-control-name="name" panel control name. It should be the same in the top and bottom panels string value data-control-name="title-filter"
data-control-action="filter" panel control action definition 'filter' data-control-action="filter"
data-control-storage="false" exclude control from storage (when cookies/localstorage is enabled) 'true' ot 'false' data-control-storage="false"
data-control-deep-link="false" exclude control from deep link (when deep linking is enabled) 'true' ot 'false' data-control-deep-link="false"
data-control-animation="false" exclude control from animation effects 'true' ot 'false' data-control-animation="false"
data-control-animate-to-top="false" perform "animate to top" effect for the given control; as a rule, used in bottom panel 'true' ot 'false' data-control-animate-to-top="false"