jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
172 lines (162 loc) • 8.15 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery ComboBox, DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxComboBox, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
<meta name="description" content="The jqxComboBox represents a widget that contains a list of
selectable items displayed in a drop-down. Users can enter information in the text box portion and search for a specific item. The widget comes with built-in auto-complete support.
jqxComboBox has built-in auto complete functionality which enables users to quickly find and select from a pre-populated list of values as they type." />
<title id='Description'>jqxComboBox has built-in auto complete functionality which enables users to quickly find and select from a pre-populated list of values as they type.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
"Caffé macchiato",
"Café mélange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappé coffee",
"Iced Coffee",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
// Create a jqxComboBox
$("#jqxComboBox").jqxComboBox({ source: source, selectedIndex: 0, width: '200', height: '25'});
// Create a jqxDropDownList
var source = [
"Starts with",
"Starts with(Case Sensitive)",
"Ends with",
"Ends with(Case Sensitive)",
"Contains",
"Contains(Case Sensitive)",
"Equal",
"Equal(Case Sensitive)",
];
$("#jqxDropDownList").jqxDropDownList({ source: source, selectedIndex: 0, width: '200', height: '25'});
$('#AutoComplete').jqxCheckBox({ width: '120px'});
$('#Enabled').jqxCheckBox({ checked: true, width: '120px'});
$('#Open').jqxButton({ width: 80});
$('#Close').jqxButton({ width: 80});
$('#Settings').jqxExpander({width: 220, showArrow: false, toggleMode: 'none'});
$('#Open').mousedown(function () {
// show popup.
$("#jqxComboBox").jqxComboBox('open');
return false;
});
$('#Close').mousedown(function () {
// hide popup.
$("#jqxComboBox").jqxComboBox('close');
return false;
});
$('#Enabled').on('change', function (event) {
// enable or disable.
var checked = !event.args.checked;
$("#jqxComboBox").jqxComboBox({ disabled: checked });
});
$('#AutoComplete').on('change', function (event) {
// set autocomplete property.
var checked = event.args.checked;
$("#jqxComboBox").jqxComboBox({ autoComplete: checked });
});
$("#jqxDropDownList").on('select', function (event) {
// set search mode.
var searchType = '';
switch (event.args.index) {
case 0:
searchType = 'startswithignorecase';
break;
case 1:
searchType = 'startswith';
break;
case 2:
searchType = 'endswithignorecase';
break;
case 3:
searchType = 'endswith';
break;
case 4:
searchType = 'containsignorecase';
break;
case 5:
searchType = 'contains';
break;
case 6:
searchType = 'equalsignorecase';
break;
case 7:
searchType = 'equals';
break;
}
$("#jqxComboBox").jqxComboBox({ searchMode: searchType });
});
});
</script>
<div id='jqxWidget'>
<div style='float: left;'>
<div style='float: left; margin-top: 10px;' id='jqxComboBox'>
</div>
<div id='Settings' style='float: left; margin-left: 100px; margin-top: 10px;'>
<div>
<div>Settings</div></div>
<div>
<div style="padding: 10px;">
<span>Search Type:</span>
<div style='margin-top: 10px;' id='jqxDropDownList'>
</div>
<div style='margin-top: 10px;'>
<input type="button" value="Open" id='Open' />
<input type="button" value="Close" id='Close' />
</div>
<div>
<div style='margin-top: 10px;' id='AutoComplete'>
Auto complete</div>
<div style='margin-top: 10px;' id='Enabled'>
Enabled</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>