Skip to content

Commit 612770b

Browse files
saravanangnsaravanangn
authored
Add files via upload
1 parent 43b034b commit 612770b

File tree

12 files changed

+484
-2
lines changed

12 files changed

+484
-2
lines changed

‎README.md‎

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,75 @@
1-
# ej2-AutoComplete-custom-filtering
2-
Typescript Autocomplete custom filtering with highlight search
1+
# Essential JS 2 QuickStart
2+
3+
This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
4+
5+
The application contains Essential JS 2 button component for preview and all common settings are preconfigured.
6+
7+
## Getting Started
8+
9+
To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
10+
11+
```
12+
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
13+
cd quickstart
14+
```
15+
16+
## Installing
17+
18+
We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
19+
20+
We already configure the required packages in the `package.json` file.
21+
22+
You can run the below command to install all dependent packages related to this seed project.
23+
24+
```
25+
npm install
26+
```
27+
28+
## Testing
29+
30+
This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
31+
32+
We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
33+
34+
Protractor can interact with our web application and verify the test scripts.
35+
36+
We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
37+
38+
```
39+
npm run update-webdriver
40+
```
41+
42+
Open another terminal and run the below npm script. It will start web server to serve our application.
43+
44+
```
45+
npm run serve
46+
```
47+
48+
Once the web server is up and running, we can run the end-to-end tests using the below npm script
49+
50+
```
51+
npm run test
52+
```
53+
54+
> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
55+
56+
If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
57+
58+
## Running
59+
60+
The application is configured with `browser-sync`, so it will serve the web application in your default browser.
61+
62+
We used `SystemJS` for module loading.
63+
64+
You can use the below npm script to run the web application.
65+
66+
```
67+
npm run start
68+
```
69+
70+
## Resources
71+
72+
You can also refer the below resources to know more details about Essential JS 2 components.
73+
74+
* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
75+
* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)

‎e2e/protractor.conf.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
exports.config = {
2+
3+
allScriptsTimeout: 11000,
4+
5+
capabilities: {
6+
'browserName': 'chrome'
7+
},
8+
9+
framework: 'jasmine',
10+
11+
jasmineNodeOpts: {
12+
defaultTimeoutInterval: 10000
13+
},
14+
15+
onPrepare: function() {
16+
browser.waitForAngularEnabled(false);
17+
},
18+
19+
specs: ['./*.spec.js']
20+
};

‎gulpfile.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use strict';
2+
3+
var gulp = require('gulp');
4+
5+
/**
6+
* Load the sample in src/app/index
7+
*/
8+
gulp.task('start', ['compile'], function(done) {
9+
var browserSync = require('browser-sync');
10+
var bs = browserSync.create('Essential JS 2');
11+
var options = {
12+
server: {
13+
baseDir: ['./src', './']
14+
},
15+
ui: false
16+
};
17+
bs.init(options, done);
18+
19+
/**
20+
* Watching typescript file changes
21+
*/
22+
gulp.watch('src/**/*.ts', ['compile', bs.reload]).on('change', reportChanges);
23+
});
24+
25+
/**
26+
* Compile TypeScript to JS
27+
*/
28+
gulp.task('compile', function(done) {
29+
var ts = require('gulp-typescript');
30+
// Default typescript config
31+
var defaultConfig = {
32+
typescript: require('typescript')
33+
};
34+
var tsProject, tsResult;
35+
// Create the typescript project
36+
tsProject = ts.createProject('tsconfig.json', defaultConfig);
37+
// Get typescript result
38+
tsResult = gulp.src(['./src/**/*.ts'], { base: '.' })
39+
.pipe(ts(tsProject))
40+
.pipe(gulp.dest('./'))
41+
.on('error', function(e) {
42+
done(e);
43+
process.exit(1);
44+
}).on('end', function() {
45+
done();
46+
});
47+
});
48+
49+
function reportChanges(event) {
50+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
51+
}
52+
/**
53+
* Testing spec files
54+
*/
55+
var protractor = require('gulp-protractor').protractor;
56+
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
57+
var webdriver_update = require('gulp-protractor').webdriver_update_specific;
58+
59+
gulp.task('e2e-serve', webdriver_standalone);
60+
61+
gulp.task('e2e-webdriver-update', webdriver_update({
62+
webdriverManagerArgs: ['--ie', '--edge']
63+
}));
64+
65+
gulp.task('e2e-test', ['compile'], function(done) {
66+
var browserSync = require('browser-sync');
67+
var bs = browserSync.create('Essential JS 2');
68+
var options = {
69+
server: {
70+
baseDir: [
71+
'./src/app/',
72+
'./src/resource/',
73+
'./node_modules/@syncfusion/ej2/'
74+
],
75+
directory: true
76+
},
77+
ui: false,
78+
open: false,
79+
notify: false
80+
};
81+
bs.init(options, function() {
82+
gulp.src(['./spec/**/*.spec.js'])
83+
.pipe(protractor({
84+
configFile: 'e2e/protractor.conf.js'
85+
}))
86+
.on('error', function(e) {
87+
console.error('Error: ' + e.message);
88+
done();
89+
process.exit(1);
90+
})
91+
.on('end', function() {
92+
done();
93+
process.exit(0);
94+
});
95+
});
96+
});

‎license‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
2+
3+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
4+
5+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
6+
7+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
8+
9+
The Syncfusion license that contains the terms and conditions can be found at
10+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "ej2-quickstart",
3+
"version": "0.0.1",
4+
"description": "Essential JS 2 typescript quick start application",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/syncfusion/ej2-quickstart.git"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-base": "*",
13+
"@syncfusion/ej2-buttons": "*",
14+
"@syncfusion/ej2-lists": "*",
15+
"@syncfusion/ej2-inputs": "*",
16+
"@syncfusion/ej2-popups": "*",
17+
"@syncfusion/ej2-dropdowns": "*",
18+
"@syncfusion/ej2-charts": "*"
19+
},
20+
"devDependencies": {
21+
"browser-sync": "^2.18.12",
22+
"gulp": "^3.9.1",
23+
"gulp-protractor": "^4.1.0",
24+
"gulp-typescript": "^2.13.0",
25+
"jasmine": "^2.6.0",
26+
"systemjs": "^0.20.14",
27+
"typescript": "2.3.4",
28+
"fuse.js": "^3.2.0"
29+
},
30+
"scripts": {
31+
"start": "gulp start",
32+
"serve": "gulp e2e-serve",
33+
"test": "gulp e2e-test",
34+
"update-webdriver": "gulp e2e-webdriver-update"
35+
}
36+
}

‎src/app/app.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
define(["require", "exports", "@syncfusion/ej2-dropdowns", "fuse.js"], function (require, exports, ej2_dropdowns_1, Fuse) {
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
var booksData = [
5+
{ BookName: 'Support Vector Machines Succinctly', BookID: 'BOOK1' }, { BookName: 'Scala Succinctly', BookID: 'BOOK2' },
6+
{ BookName: 'Application Security in .NET Succinctly', BookID: 'BOOK3' },
7+
{ BookName: 'ASP.NET WebHooks Succinctly', BookID: 'BOOK4' },
8+
{ BookName: 'Xamarin.Forms Succinctly', BookID: 'BOOK5' }, { BookName: 'Asynchronous Programming Succinctly', BookID: 'BOOK6' },
9+
{ BookName: 'Java Succinctly Part 2', BookID: 'BOOK7' }, { BookName: 'Java Succinctly Part 1', BookID: 'BOOK8' },
10+
{ BookName: 'PHP Succinctly', BookID: 'BOOK9' }, { BookName: 'Bing Maps V8 Succinctly', BookID: 'BOOK10' },
11+
{ BookName: 'WPF Debugging and Performance Succinctly', BookID: 'BOOK11' },
12+
{ BookName: 'Go Web Development Succinctly', BookID: 'BOOK12' },
13+
{ BookName: 'Go Succinctly', BookID: 'BOOK13' }, { BookName: 'More UWP Succinctly', BookID: 'BOOK14' },
14+
{ BookName: 'UWP Succinctly', BookID: 'BOOK15' }, { BookName: 'LINQPad Succinctly', BookID: 'BOOK16' },
15+
{ BookName: 'MongoDB 3 Succinctly', BookID: 'BOOK17' }, { BookName: 'R Programming Succinctly', BookID: 'BOOK18' },
16+
{ BookName: 'Azure Cosmos DB and DocumentDB Succinctly', BookID: 'BOOK19' },
17+
{ BookName: 'Unity Game Development Succinctly', BookID: 'BOOK20' },
18+
{ BookName: 'Aurelia Succinctly', BookID: 'BOOK21' }, { BookName: 'Microsoft Bot Framework Succinctly', BookID: 'BOOK22' },
19+
{ BookName: 'ASP.NET Core Succinctly', BookID: 'BOOK23' }, { BookName: 'Twilio with C# Succinctly', BookID: 'BOOK24' },
20+
{ BookName: 'Angular 2 Succinctly', BookID: 'BOOK25' }, { BookName: 'Visual Studio 2017 Succinctly', BookID: 'BOOK26' },
21+
{ BookName: 'Camtasia Succinctly', BookID: 'BOOK27' }, { BookName: 'SQL Queries Succinctly', BookID: 'BOOK28' },
22+
{ BookName: 'Keystone.js Succinctly', BookID: 'BOOK29' }, { BookName: 'Groovy Succinctly', BookID: 'BOOK30' },
23+
{ BookName: 'SQL Server for C# Developers Succinctly', BookID: 'BOOK31' },
24+
{ BookName: 'Ubuntu Server Succinctly', BookID: 'BOOK32' },
25+
{ BookName: 'Statistics Fundamentals Succinctly', BookID: 'BOOK33' }, { BookName: '.NET Core Succinctly', BookID: 'BOOK34' },
26+
{ BookName: 'SOLID Principles Succinctly', BookID: 'BOOK35' }, { BookName: 'Node.js Succinctly', BookID: 'BOOK36' },
27+
{ BookName: 'Customer Success for C# Developers Succinctly', BookID: 'BOOK37' },
28+
{ BookName: 'Data Capture and Extraction with C# Succinctly', BookID: 'BOOK38' },
29+
{ BookName: 'Hadoop Succinctly', BookID: 'BOOK39' }, { BookName: 'SciPy Programming Succinctly', BookID: 'BOOK40' },
30+
{ BookName: 'Hive Succinctly', BookID: 'BOOK41' }, { BookName: 'React.js Succinctly', BookID: 'BOOK42' },
31+
{ BookName: 'ECMAScript 6 Succinctly', BookID: 'BOOK43' }, { BookName: 'GitHub Succinctly', BookID: 'BOOK44' },
32+
{ BookName: 'Gulp Succinctly', BookID: 'BOOK45' }, { BookName: 'Visual Studio Code Succinctly', BookID: 'BOOK46' },
33+
{ BookName: 'Object-Oriented Programming in C# Succinctly', BookID: 'BOOK47' },
34+
{ BookName: 'C# Code Contracts Succinctly', BookID: 'BOOK48' },
35+
{ BookName: 'Leaflet.js Succinctly', BookID: 'BOOK49' }, { BookName: 'Delphi Succinctly', BookID: 'BOOK50' },
36+
{ BookName: 'SQL on Azure Succinctly', BookID: 'BOOK51' }, { BookName: 'Web Servers Succinctly', BookID: 'BOOK52' },
37+
{ BookName: 'ASP.NET Multitenant Applications Succinctly', BookID: 'BOOK53' },
38+
{ BookName: 'ASP.NET MVC Succinctly', BookID: 'BOOK54' },
39+
{ BookName: 'Windows Azure Websites Succinctly', BookID: 'BOOK55' },
40+
{ BookName: 'Localization for .NET Succinctly', BookID: 'BOOK56' },
41+
{ BookName: 'ASP.NET Web API Succinctly', BookID: 'BOOK57' },
42+
{ BookName: 'ASP.NET MVC 4 Mobile Websites Succinctly', BookID: 'BOOK58' },
43+
{ BookName: 'jQuery Succinctly', BookID: 'BOOK59' }, { BookName: 'JavaScript Succinctly', BookID: 'BOOK60' },
44+
];
45+
var atcObj = new ej2_dropdowns_1.AutoComplete({
46+
dataSource: booksData,
47+
fields: { value: 'BookName' },
48+
placeholder: 'e.g. Node.js Succinctly',
49+
filtering: function (e) {
50+
var options = {
51+
keys: ['BookName'],
52+
includeMatches: true,
53+
findAllMatches: true
54+
};
55+
var fuse = new Fuse(booksData, options);
56+
var result = fuse.search(e.text);
57+
var data = [];
58+
for (var i = 0; i < result.length; i++) {
59+
data.push(result[i].item);
60+
}
61+
e.updateData(data, null);
62+
var popupElement = document.getElementById('books_popup');
63+
var lists = popupElement.querySelectorAll('.e-list-item');
64+
highlightSearch(lists, result);
65+
}
66+
});
67+
atcObj.appendTo('#books');
68+
function highlightSearch(listItems, result) {
69+
if (result.length > 0) {
70+
for (var i = 0; i < listItems.length; i++) {
71+
var innerHTML = listItems[i].innerHTML;
72+
for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {
73+
var indexes = result[i].matches[0].indices[j];
74+
innerHTML = innerHTML.substring(0, indexes[0]) + '<span class="e-highlight">' +
75+
innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);
76+
listItems[i].innerHTML = innerHTML;
77+
}
78+
}
79+
}
80+
}
81+
});

0 commit comments

Comments
 (0)