jQuery ComboBox

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

by jqwidgets

HTML

<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">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxComboBox'></div>

JavaScript

var source = {
   datatype: "jsonp",
   datafields: [{
     name: 'countryName'
   }, {
     name: 'name'
   }, {
     name: 'population',
     type: 'float'
   }, {
     name: 'continentCode'
   }, {
     name: 'adminName1'
   }],
   url: "http://ws.geonames.org/searchJSON",
   data: {
     featureClass: "P",
     style: "full",
     maxRows: 12
   }
 };
 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,
   minLength: 2,
   theme: 'energyblue',
   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();
   }
 });