JQuery Input

Set the valueMember property of the jqxInput. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<input id="jqxInput" />
<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 jqxInput
 $("#jqxInput").jqxInput({
     source: dataAdapter,
     placeHolder: "Contact Name:",
     displayMember: "ContactName",
     valueMember: "CompanyName",
     width: 200,
     height: 25,
     theme: 'energyblue'
 });
 $("#jqxInput").on('select', function (event) {
     if (event.args) {
         var item = event.args.item;
         if (item) {
             var valueelement = $("<div></div>");
             valueelement.text("Value: " + item.value);
             var labelelement = $("<div></div>");
             labelelement.text("Label: " + item.label);
             $("#selectionlog").children().remove();
             $("#selectionlog").append(labelelement);
             $("#selectionlog").append(valueelement);
         }
     }
 });