Updated ng2-select2 library and added custom filter for keypress tab

Resolves #214

package.json

@@ -48,7 +48,7 @@
     "jquery": "3.1.1",
     "json-loader": "^0.5.4",
     "ng2-dragula": "1.2.2",
-    "ng2-select2": "0.6.1",
+    "ng2-select2": "1.0.0-beta.3",
     "rxjs": "5.0.0-rc.4",
     "select2": "^4.0.3",
     "typescript": "2.1.4",

src/components/popover/tab/keypress/keypress-tab.component.html

@@ -1,7 +1,12 @@
 <div class="scancode-options">
     <b class="setting-label">Scancode:</b>
-    <select2 #scanCodeSelect [data]="scanCodeGroups" [value]="scanCode.toString()" (valueChanged)="onScancodeChange($event)"
+    <select2
-        [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
+            [data]="scanCodeGroups"
+            [value]="scanCode.toString()"
+            (valueChanged)="onScancodeChange($event)"
+            [width]="200"
+            [options]="options"
+    ></select2>
     <capture-keystroke-button></capture-keystroke-button>
 </div>
 <div class="modifier-options">

src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
+import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
 
 import { KeyAction, KeystrokeAction } from '../../../../config-serializer/config-items/key-action';
 
@@ -23,6 +23,7 @@ export class KeypressTabComponent implements OnChanges, Tab {
 
     private scanCodeGroups: Array<Select2OptionData>;
     private longPressGroups: Array<Select2OptionData>;
+    private options: Select2Options;
 
     private scanCode: number;
     private selectedLongPressIndex: number;
@@ -40,6 +41,18 @@ export class KeypressTabComponent implements OnChanges, Tab {
         this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.scanCode = 0;
         this.selectedLongPressIndex = -1;
+        this.options = {
+            templateResult: this.scanCodeTemplateResult,
+            matcher: (term: string, text: string, data: Select2OptionData) => {
+                let found = text.toUpperCase().indexOf(term.toUpperCase()) > -1;
+
+                if (!found && data.additional && data.additional.explanation) {
+                    found = data.additional.explanation.toUpperCase().indexOf(term.toUpperCase()) > -1;
+                }
+
+                return found;
+            }
+        };
     }
 
     ngOnChanges() {
@@ -102,7 +115,7 @@ export class KeypressTabComponent implements OnChanges, Tab {
         return keystrokeAction;
     }
 
-    scanCodeTemplateResult: Function = (state: any) => {
+    scanCodeTemplateResult: Select2TemplateFunction = (state: Select2OptionData): JQuery | string => {
         if (!state.id) {
             return state.text;
         }

src/index.html

@@ -26,7 +26,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         <main-app></main-app>
 
         <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- TODO remove in near future -->
-        <script src="vendor/select2/js/select2.min.js"></script>
+        <script src="vendor/select2/js/select2.full.min.js"></script>
         <script src="uhk.js"></script>
     </body>
 </html>