-
Notifications
You must be signed in to change notification settings - Fork 21
/
custom-filtering.ts
62 lines (60 loc) · 2.78 KB
/
custom-filtering.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { loadCultureFiles } from '../common/culture-loader';
/**
* AutoComplete Custom Filtering Sample
*/
import { AutoComplete, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
import Fuse from 'fuse.js';
import * as booksData from './dataSource.json';
(window as any).default = (): void => {
loadCultureFiles();
// initialize AutoComplete component
let atcObj: AutoComplete = new AutoComplete({
//set the data to dataSource property
dataSource: (booksData as any).booksData ,
// maps the appropriate column to fields property
fields: { value: 'BookName' },
// set placeholder to AutoComplete input element
placeholder: 'e.g. Node.js Succinctly',
//Bind the filter event
filtering: (e: FilteringEventArgs) => {
let options: Object = {
keys: ['BookName'],
includeMatches: true,
findAllMatches: true
};
// create object from Fuse constructor
let fuse: Fuse <any>= new Fuse((booksData as any).booksData, options);
// store the search result data based on typed characters
let result: any = fuse.search(e.text);
// declare object array for storing filtering results
let data: { [key: string]: Object; }[] = [];
// store the search result to the array
for (let i: number = 0; i < result.length; i++) {
data.push(result[i].item as any);
}
// pass the filter data source to updateData method.
e.updateData(data, null);
let popupElement: HTMLElement = document.getElementById('books_popup');
if (popupElement)
{
let lists: Element[] = <NodeListOf<Element> & Element[]>popupElement.querySelectorAll('.e-list-item');
// For highlight the typed characters, pass the result data and list items to highlightSearch method.
highlightSearch(lists, result);
}
}
});
atcObj.appendTo('#books');
function highlightSearch(listItems: Element[], result: any): void {
if (result.length > 0) {
for (let i: number = 0; i < listItems.length; i++) {
let innerHTML: string = listItems[i].innerHTML;
for (let j: number = result[i].matches[0].indices.length - 1; j >= 0; j--) {
let indexes: number[] = <number[]>result[i].matches[0].indices[j];
innerHTML = innerHTML.substring(0, indexes[0]) + '<span class="e-highlight">' +
innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);
listItems[i].innerHTML = innerHTML;
}
}
}
}
};