jQuery ComboBox

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

by Harsh Bhatnagar

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 = [
        "Affogato",
        
        "Café Crema",
        "Caffé Latte"
    ];

	function optimalWidth (items) {
        var pxRound = 7.17;
        var biggerLength = 0;
        var maxLen = biggerLength || 1;
    	for (var i = 0; i < items.length; i += 1) {
        	console.log(items[i] + ' - ' + items[i].length)
            if (biggerLength < items[i].length) {
            	biggerLength = items[i].length
            }
        }
        var maxLen = biggerLength || 1;
        return maxLen * pxRound;
    }

	// 1 char = 7.143 px
	var optimal = optimalWidth(source);
	console.log(optimal);

    // Create a jqxComboBox
    $("#jqxComboBox").jqxComboBox({
        source: source,
        width: optimal + 'px',
        height: '25px',
        selectedIndex: 0,
        theme: 'energyblue',
    autoDropDownHeight: false,
      dropDownHeight: 300
    });