ractive-ez-combobox
Version:
Ractive Ez UI Combobox
103 lines (85 loc) • 2.11 kB
HTML
<html>
<head>
<style>
#container {
width: 100%;
height: 100%;
padding: 1em;
}
.ez-combobox,
.ez-multibox {
margin: 0.25em;
}
.ez-combobox {
width: 20em;
}
</style>
</head>
<body>
<div id="container" class="container"></div>
<script type="text/ractive" id="template">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<EzComboBox
button
value="{{ value }}"
items="{{ items }}"
path="country_code"
compare="{{ compare }}">
<b>{{ country_code }}</b> - {{ country_name }}
</EzComboBox>
<EzComboBox
button
typeahead
value="{{ value }}"
items="{{ items }}"
path="country_code"
compare="{{ compare }}">
<b>{{ country_code }}</b> - {{ country_name }}
</EzComboBox>
<EzComboBox
button
typeahead
disabled
value="{{ value }}"
items="{{ items }}"
path="country_code"
compare="{{ compare }}">
<b>{{ country_code }}</b> - {{ country_name }}
</EzComboBox>
<EzComboBox
value="{{ value }}"
path="country_name"
placeholder="async search name anywhere"
filter="{{ filterAnywhere }}"
compare="{{ compare }}"
search="{{ searchAsync }}"
searchDelay="250"
searchOnInput="true">
{{ country_name }}
</EzComboBox>
<EzMultiBox
button
typeahead
placeholder="select multiple values"
values="{{ values }}"
items="{{ items }}"
path="country_code"
compare="{{ compare }}">
<b>{{ country_code }}</b> - {{ country_name }}
</EzMultiBox>
<EzMultiBox
button
typeahead
disabled
placeholder="select multiple values"
values="{{ values }}"
items="{{ items }}"
path="country_code"
compare="{{ compare }}">
<b>{{ country_code }}</b> - {{ country_name }}
</EzMultiBox>
</script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>