Html5 ComboBox

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

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxComboBox'></div>

JavaScript

var source = {
          datatype: "jsonp",
          datafields: [{
              name: 'countryName'
          }, {
              name: 'name'
          }, {
              name: 'population',
              type: 'float'
          }, {
              name: 'continentCode'
          }, {
              name: 'adminName1'
          }],
          url: "http://api.geonames.org/searchJSON",
          data: {
              featureClass: "P",
              style: "full",
              maxRows: 12,
              username: "jqwidgets"
          }
      };
      var dataAdapter = new $.jqx.dataAdapter(source, {
          formatData: function (data) {
              if ($("#jqxComboBox").jqxComboBox('searchString') != undefined) {
                  data.name_startsWith = $("#jqxComboBox").jqxComboBox('searchString');
                  return data;
              }
          }
      });
      $("#jqxComboBox").jqxComboBox({
          width: 250,
          height: 25,
          source: dataAdapter,
          remoteAutoComplete: true,
          autoDropDownHeight: true,
          selectedIndex: 0,
          displayMember: "name",
          valueMember: "countryName",
          renderer: function (index, label, value) {
              var item = dataAdapter.records[index];
              if (item != null) {
                  var label = item.name + ", " + item.countryName + ", " + item.adminName1;
                  return label;
              }
              return "";
          },
          renderSelectedItem: function (index, item) {
              var item = dataAdapter.records[index];
              if (item != null) {
                  var label = item.name + ", " + item.countryName + ", " + item.adminName1;
                  return label;
              }
              return "";
          },
          search: function (searchString) {
              dataAdapter.dataBind();
          }
      });