JQuery TextArea

Set the displayMember property of the jqxTextArea. Author: http://jqwidgets.com

by klien54

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<textarea id="jqxTextArea"></textarea>
<input type='button' id='getvalue' value='Get Value'></input>
<br />
<label style="font-family: Verdana; font-size: 10px;">ex: Ana</label>
<div style="font-family: Verdana; font-size: 13px;" id='selectionlog'></div>

JavaScript

var data = [{
     "CompanyName": "Company 1",
         "ContactName": "Ana"
 }, {
     "CompanyName": "Company 2",
         "ContactName": "Maria"
 }];
 // prepare the data
 var source = {
     datafields: [{
         name: 'CompanyName'
     }, {
         name: 'ContactName'
     }],
     localdata: data
 };
 var dataAdapter = new $.jqx.dataAdapter(source);
 // Create a jqxTextArea
 $("#jqxTextArea").jqxTextArea({
     source: dataAdapter,
     placeHolder: "Contact Name:",
     displayMember: "ContactName",
     valueMember: "CompanyName",
     width: 200,
     height: 50,
     theme: 'energyblue'
 });


$("#getvalue").jqxButton().on('click', function (e) {
	
  var value = $("#jqxTextArea").jqxTextArea('val');
	console.log("value: ", value);

});