<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxbuttons.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxscrollbar.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxtextarea.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxTextArea valueMember Property
</
h3
>
<
textarea
id
=
'jqxTA'
></
textarea
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var data = [{
"id": 1,
"name": "Akash",
"address": "Noida"
},
{
"id": 2,
"name": "Deepak",
"address": "Noida"
},
{
"id": 3,
"name": "Rakesh",
"address": "Delhi"
},
{
"id": 4,
"name": "Adarsh",
"address": "Delhi"
},
{
"id": 5,
"name": "Arun",
"address": "Noida"
},];
$('#jqxTA').jqxTextArea({
source: data,
placeHolder: "Name:",
displayMember: "name",
valueMember: "address",
width: 250,
height: 100,
placeHolder: 'Enter Name...'
});
$("#jqxTA").on('select', function (event) {
if (event.args) {
var item = event.args.item;
if (item)
alert("Name: " + item.label
+ " Address: " + item.value);
}
});
});
</
script
>
</
body
>
</
html
>