Html5 ComboBox

Set the autoComplete property of the jqxComboBox. Author: http://jqwidgets.com

by Hristo Hristov

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>
<div id='jqxComboBox'></div>
<div id='kd_nummer'></div>

JavaScript

var source = [
     "Affogato",
     "Americano",
     "Bicerin",
     "Breve",
     "Café Bombón",
     "Café au lait",
     "Caffé Corretto",
     "Café Crema",
     "Caffé Latte"
];
// Create a jqxComboBox
$("#jqxComboBox").jqxComboBox({
    source: source,
    theme: 'energyblue',
    width: '200px',
    height: '25px',
    //searchMode:'endswith',
    autoComplete: true
});

/// ---------------- \\\

//var trackSource = {
//    datatype: "json",
//    datafields: [
//      { name: 'kd_key', type: 'number' },
//      { name: 'kd_nr', type: 'number' },
//      { name: 'kd_name', type: 'string' }
//    ],
//    type: "GET",
//    url: 'model/norad_kunden.php',
//};

var data = [
     //{ "kd_key": 1, 'kd_nr': 100 'kd_name': "Affogato" },
     //{ "kd_key": 2, 'kd_nr': 200 'kd_name': "Bicerin" },
     //{ "kd_key": 3, 'kd_nr': 300 'kd_name': "Breve" },
     //{ "kd_key": 4, 'kd_nr': 400 'kd_name': "Café Bombón" },
     //{ "kd_key": 5, 'kd_nr': 500 'kd_name': "Café au lait" },
     //{ "kd_key": 6, 'kd_nr': 600 'kd_name': "Caffé Corretto" },
     //{ "kd_key": 7, 'kd_nr': 700 'kd_name': "Café Crema" },
     //{ "kd_key": 8, 'kd_nr': 800 'kd_name': "Caffé Latte" }
];

var trackSource = {
    datatype: "json",
    datafields: [
      { name: 'kd_key', type: 'number' },
      { name: 'kd_nr', type: 'number' },
      { name: 'kd_name', type: 'string' }
    ],
    localdata: data
    //type: "GET",
    //url: 'model/norad_kunden.php',
};

var dataAdapter1 = new $.jqx.dataAdapter(trackSource,
  //{
  //    //formatData: function (data) {
  //    //    if ($("#kd_nummer").jqxComboBox('searchString') != undefined) {
  //    //        data.kd_nr = $("#kd_nummer").jqxComboBox('searchString');
  //    //        return data;
  //    //    }
  //    //}
  //    autoBind: true
  //}
);
console.log(dataAdapter1);

$("#kd_nummer").jqxComboBox({
    source: dataAdapter1,
    //theme: 'fresh',
    height: 20,
    width: 200,
    remoteAutoComplete: true,
    minLength: 3,
   ...