jQuery ComboBox

Set the autoDropDownHeight 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 = [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Café Bombón",
        "Café au lait",
        "Caffé Corretto and some longword for testing",
        "Caffé Corretto and some long",
        "Café Crema",
        "Caffé Latte",
         "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Café Bombón",
        "Café au lait",
        "Caffé Corretto",
        "Café Crema",
        "Caffé Latte"
    ];

	function optimalWidth (items) {
        var pxRound = 7.15;
        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:true
    });