Search and Filter component for List and Combobox in flex

ExampleHi,

I was looking some solution for filter and search function when you have a very heavy data in combobox and list control or may be any other controls which supports dataProvider API’s when you have 1000 or more records in your dataProvider then it becomes very deficult for end user to look for a specific records using this component user can type in textfield and based on user input the dataProvider will be filtered and will display only those records which matches with user inputs

Here i make a solution where in a user will start typing in text field and data in combobox or list should be filtered as per user input

hope you will love this

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”

horizontalScrollPolicy=”off” verticalScrollPolicy=”off”

verticalGap=”0″

creationComplete=”init()”>

<mx:Script>

<![CDATA[

import mx.controls.TextInput;

import mx.controls.List;

import mx.controls.ComboBox;

import mx.core.EventPriority;

import mx.events.ListEvent;

import mx.effects.easing.Linear;

import mx.collections.ArrayCollection;

/**

* This component provides an ability to filter and search in a lengthy data component will

* have a predefined textfield and will filter and search based on user inputs in it

*

* Tightly coupled with List and ComboBox controls

*

* */

[Bindable]

private var _dataCollection : ArrayCollection

[Bindable]

private var _labelField : String = null;

private var _type : String = “”;

public const COMBOBOX : String = “ComboBox”;

public const LIST : String = “List”;

private var _lst : List = null;

private var _cb : ComboBox = null;

private var _ti : TextInput = null;

private var _selectedItem : Object = null;

private var _selectedIndex : int = -1;

/**

* @public

* @return – [Object - ArrayCollection]

* @des – getter of IplantFilterUI dataProvider

* */

public function get dp() : Object{

return _dataCollection;

}

/**

* @public

* @param – [Object - ObjectProxy]

* @return – [Nothing]

* @des – setter of IplantFilterUI dataProvider

* */

public function set dp(data : Object) : void{

_dataCollection = data as ArrayCollection;

_dataCollection.filterFunction = getlist;

comitProperties();

}

/**

* @private

* @param – [Nothing]

* @return – [Nothing]

* @des – API set data provider to added List OR ComboBox control

*

* */

private function comitProperties() : void {

if(_type == LIST){

_lst.dataProvider = _dataCollection;

_lst.labelField = _labelField;

_lst.selectedIndex = _selectedIndex;

}

if(_type == COMBOBOX){

_cb.dataProvider = _dataCollection;

_cb.labelField = _labelField;

_cb.selectedIndex = _selectedIndex;

}

}

/**

* @public

* @param – [String - labelField]

* @return – [Nothing]

* @des – API set labelField property to List/ComboBox

*

* */

public function set labelField(field : String) : void {

_labelField = field;

}

/**

* @public

* @param – [Nothing]

* @return – [Object - ObjectProxy]

* @des – API returns selected item form List/ComboBox

*

* */

public function get selectedItem() : Object {

return _selectedItem;

}

/**

* @public

* @return – [Nothing]

* @param – [int]

* @des – API set selected index of List/ComboBox

*

* */

public function set selectedIndex(index : int) : void {

_selectedIndex = index;

}

/**

* @public

* @return – [int]

* @des – API returns selected item index form List/ComboBox

*

* */

public function get selectedIndex() : int {

return _selectedIndex;

}

/**

* @private

* @return – [Nothing]

* @des – init–

*

* */

private function init() : void {

initUI();

comitProperties();

}

/**

* @public

* @return – [Nothing]

* @des – API set which type of component to be added List OR ComboBox

*

* */

public function set type(type : String) : void {

if(type == COMBOBOX || type == LIST){

_type = type;

} else{

throw new Error(“Only combobox and list is valid type for IplantFilterUI”)

return;

}

}

/**

* @private

* @return – [Nothing]

* @des – API add either List or ComboBox control based on _type property

*

* */

private function initUI() : void {

_ti = new TextInput();

_ti.percentWidth = 100;

_ti.addEventListener(Event.CHANGE, textInputChaangeEventHandler, false, EventPriority.DEFAULT, true);

if(_type == LIST){

_lst = new List();

this.addChild(_lst);

_lst.percentHeight = 100;

_lst.percentWidth = 100;

_lst.addEventListener(ListEvent.CHANGE, itemChangeEventHandler, false, EventPriority.DEFAULT, true);

_lst.addEventListener(ListEvent.ITEM_CLICK, itemChangeEventHandler, false, EventPriority.DEFAULT, true);

}

if(_type == COMBOBOX){

_cb = new ComboBox();

this.addChild(_cb);

_cb.percentWidth = 100;

_cb.addEventListener(ListEvent.CHANGE, itemChangeEventHandler, false, EventPriority.DEFAULT, true);

}

this.invalidateDisplayList();

}

/**

* @private

* @param – [Event - ListEvent]

* @return – [Nothing]

* @des – List and ComboBox control change/itemClick event handler when user change and/or click any list

* item then this API dispatch a ListEvent which can listen by any comonent

*

* */

private function itemChangeEventHandler(event : ListEvent) : void {

_selectedIndex = event.target.selectedIndex;

_selectedItem = event.target.selectedItem;

this.dispatchEvent(event);

}

/**

* @private

* @param – [Object - filter/search item]

* @return – [Boolean]

* @des – filter logic

*

* */

private function getlist(item : Object) : Boolean {

var result:Boolean=false;

var len : int = _ti.text.length;

if(String(item[_labelField]).substr(0, len) == _ti.text){

return true;

}

return result;

}

/**

* @private

* @param – [Event - Event]

* @return – [Nothing]

* @des – TextInput change event handler

*

*

* */

private function textInputChaangeEventHandler(event : Event) : void {

_dataCollection.refresh();

if(_type == COMBOBOX){

_cb.open();

}

}

]]>

</mx:Script>

</mx:VBox>

Looking for your comments