jQuery ComboBox

Set the search 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: "https://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,
     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();
     }
 });