Html5 ComboBox

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

by txhi

HTML

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

JavaScript

var source = [
		"Affogato",
		"Americano",
		"Bicerin",
		"Breve",
		"Café Bombón",
		"Café au lait",
		"Caffé Corretto",
		"Café Crema",
		"Caffé Latte"
];
// Create a jqxComboBox
$("#jqxComboBox").jqxComboBox({
		source: source,
		theme: 'energyblue',
		width: '200px',
		height: '25px',
		searchMode: 'startswithignorecase', //'startswith',
		autoComplete: true
});

var count = 20;

$('#jqxComboBox').on('focusout', function (event) {
		console.log('Event ....', count);
    var currentValue = $('#jqxComboBox').val()
    
    console.log(currentValue);
    var hasItem = false;
    for (var item in source) {
    		//console.log(item, source[item]);
        console.log('For loop');
        if (currentValue == source[item]) {
      			hasItem = true;
      	}
       
    }
    
    count--;
    
    if (hasItem) {
    		$("#jqxComboBox").jqxComboBox('val', currentValue);
    } else {
    		$("#jqxComboBox").jqxComboBox('val', '');
        alert('There is no such item');
    }
});