Skip to content

Instantly share code, notes, and snippets.

@adriatic

adriatic/app.html

Last active July 19, 2016 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adriatic/3802d4c3bccb13a7d9f8dda5060192e3 to your computer and use it in GitHub Desktop.
Save adriatic/3802d4c3bccb13a7d9f8dda5060192e3 to your computer and use it in GitHub Desktop.
Download ZIP
Autocomplete: highlighting
Raw
app.html
<template>
<div id="example">
<div class="demo-section k-content">
<ak-autocomplete k-data-source.bind="data"
k-filter="startswith"
k-placeholder="Select country..."
k-separator=", ">
<ak-template>
<span innerhtml.bind="formatValue($$item, textbox)"></span>
</ak-template>
<input style="width: 100%;" ref="textbox">
</ak-autocomplete>
</div>
</div>
</template>
Raw
app.js
export class Highlighting {
formatValue(itemText, textbox) {
let text = textbox.value;
let textMatcher = new RegExp(text, 'ig');
return itemText.replace(textMatcher, function(match) {
return '<strong>' + match + '</strong>';
});
}
data = [
'Albania',
'Andorra',
'Armenia',
'Austria',
'Azerbaijan',
'Belarus',
'Belgium',
'Bosnia & Herzegovina',
'Bulgaria',
'Croatia',
'Cyprus',
'Czech Republic',
'Denmark',
'Estonia',
'Finland',
'France',
'Georgia',
'Germany',
'Greece',
'Hungary',
'Iceland',
'Ireland',
'Italy',
'Kosovo',
'Latvia',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Malta',
'Moldova',
'Monaco',
'Montenegro',
'Netherlands',
'Norway',
'Poland',
'Portugal',
'Romania',
'Russia',
'San Marino',
'Serbia',
'Slovakia',
'Slovenia',
'Spain',
'Sweden',
'Switzerland',
'Turkey',
'Ukraine',
'United Kingdom',
'Vatican City'
];
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
<!--<script src="./config2.js"></script>-->
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment