# inputEx - KeyOpValueField Usage

## Basic KeyOpValueField creation

The KeyOpValueField makes it easy to build a search form from an existing inputEx definition

var field1 = new inputEx.KeyOpValueField({ parentEl: 'container1', availableFields: [ {type: 'string', name: 'lastname', label: 'Lastname' }, {type: 'string', name: 'firstname', label: 'Firstname' }, {type: 'select', name: 'gender', label: 'Gender', choices: ["Mr","Mrs","Ms"] } ] }); var button1 = inputEx.cn('button', null, null, 'getValue()'); YAHOO.util.Dom.get('container1').appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { alert( YAHOO.lang.JSON.stringify(field1.getValue())); });

## List of conditions

Here is a search form with multiple conditions

inputEx({ type: 'list', parentEl: 'container2', elementType: { type: 'keyopvalue', availableFields: [ {type: 'string', name: 'lastname', label: 'Lastname' }, {type: 'string', name: 'firstname', label: 'Firstname' }, {type: 'select', name: 'gender', label: 'Gender', choices: ["Mr","Mrs","Ms"] } ] } });

## Changing the operators and setting labels for operators

Two more options are available for this field: "operators" and "operatorLabels"

var field3 = new inputEx.KeyOpValueField({ parentEl: 'container3', availableFields: [ {type: 'string', name: 'lastname', label: 'Lastname' }, {type: 'string', name: 'firstname', label: 'Firstname' }, {type: 'select', name: 'gender', label: 'Gender', choices: ["Mr","Mrs","Ms"] } ], operators: ["=","!="], operatorLabels: ["equals", "different"] }); var button3 = inputEx.cn('button', null, null, 'getValue()'); YAHOO.util.Dom.get('container3').appendChild(button3); YAHOO.util.Event.addListener(button3, 'click', function() { alert( YAHOO.lang.JSON.stringify(field3.getValue())); });