		{
		"name": "infinite-autocomplete",
		"version": "3.2.2",
		"description": "lightweight-infinite-autocomplete",
		"main": "./index.js",
		"version": "4.0.0-rc",
		"description": "infinite-autocomplete",
		"main": "dist/index.js",
		"scripts": {
		"clean": "rimraf ./dist",
		"build": "npm run clean && npm run build:umd && npm run build:umd:debug",
		"watch": "npm run clean && npm run build:watch",
		"build:watch": "webpack ./src/Components/InfiniteAutocomplete.ts ./dist/index.debug.js --output-library-target=\"umd\" --watch",
		"build:umd": "webpack ./src/Components/InfiniteAutocomplete.ts ./dist/index.js --output-library-target=\"umd\" --config webpack.production.config.js",
		"build:umd:debug": "webpack ./src/Components/InfiniteAutocomplete.ts ./dist/index.debug.js --output-library-target=\"umd\"",
		"prepublish": "npm run validate-build",
		"validate-build": "npm run tslint && npm run build && npm run test",
		"test": "karma start karma.conf.js",
		"test:watch": "karma start karma.conf.js --single-run false",
		"tslint": "tslint --fix -c tslint.json 'src/*/.ts' 'test/*/.ts'"
		"start": "parcel storybook/story.html --open",
		"stub": "node storybook/server.js",
		"build": "rimraf dist && parcel build src/index.js --target node --bundle-node-modules --global InfiniteAutocomplete",
		"lint": "eslint src/",
		"prepublish": "npm run lint && npm run build"
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/Attrash-Islam/infinite-autocomplete.git"
		},
		"files": [
		"dist/",
		"infinite-autocomplete.d.ts"
		],
		"typings": "infinite-autocomplete.d.ts",
		"keywords": [
		"infinite-autocomplete",
		"autocomplete",
		"input",
		"web",
		"component",
		"select",
		"infinite autocomplete",
		"typescript"
		],
		"author": "Islam Attrash",
		"license": "MIT",
		"bugs": {
		"url": "https://github.com/Attrash-Islam/infinite-autocomplete/issues"
		},
		"homepage": "https://github.com/Attrash-Islam/infinite-autocomplete#readme",
		"dependencies": {},
		"devDependencies": {
		"@types/jasmine": "2.5.40",
		"coveralls": "2.11.15",
		"es6-promise": "4.2.4",
		"ghooks": "2.0.2",
		"istanbul-instrumenter-loader": "1.2.0",
		"jasmine-core": "2.5.2",
		"karma": "1.3.0",
		"karma-coverage": "1.1.1",
		"karma-jasmine": "1.1.0",
		"karma-phantomjs-launcher": "1.0.2",
		"karma-source-map-support": "1.2.0",
		"karma-webpack": "2.0.1",
		"rimraf": "2.5.4",
		"ts-loader": "3.1.1",
		"tslint": "5.9.1",
		"typescript": "2.5.3",
		"uglifyjs-webpack-plugin": "1.0.1",
		"webpack": "2.6.1"
		"lodash": "^4.17.11",
		"@babel/core": "7.2.0",
		"babel-eslint": "^10.0.1",
		"eslint": "^5.15.1",
		"express": "^4.16.4",
		"ghooks": "^2.0.4",
		"parcel-bundler": "^1.6.1",
		"rimraf": "^2.6.3",
		"sass": "^1.17.3"
		},
		"config": {
		"ghooks": {
		"pre-commit": "npm run validate-build"
		"pre-commit": "npm run prepublish"
		}
		}
		}

181

README.md

		@@ -1,10 +0,12 @@
		<a><img src='https://travis-ci.org/Attrash-Islam/infinite-autocomplete.svg?branch=master' /></a> <a href='https://coveralls.io/github/Attrash-Islam/infinite-autocomplete'><img src='https://coveralls.io/repos/github/Attrash-Islam/infinite-autocomplete/badge.svg' alt='Coverage Status' /></a>
		<a><img src='https://travis-ci.org/Attrash-Islam/infinite-autocomplete.svg?branch=master' /></a>

		### infinite-autocomplete
		The infinite-autocomplete component is like all these autocomplete out there, except that he is "Infinite" - which means that scrolling will fetch more data

		# infinite-autocomplete [CORE]
		Pluggable infinite-autocomplete component that can accept any implementations of yours.
		This autocomplete is like all these autocomplete out there, except that he is "Infinite" - which means that scrolling will fetch more data
		Ease of use, written totally in Pure Functional Programming mindset!

		Ease of use, flexable and written with TypeScript following the SOLID principles to guarantee a plug-in implementations so you can customize it's behaviours and inject it in any environment you want.
		# Live Demo

		<img src="https://cdn.rawgit.com/Attrash-Islam/assets/749035d3/infi-basic.gif" />

		# Popular Frameworks Wrappers
		@@ -15,44 +17,58 @@ - <a href="https://github.com/Attrash-Islam/ng-infinite-autocomplete">ng-infinite-autocomplete (AngularJS 1.x)</a>

		# Live Demo (Default Style)

		<img src="https://cdn.rawgit.com/Attrash-Islam/assets/749035d3/infi-basic.gif" />


		# Install
		```js
		npm i --save infinite-autocomplete
		npm i -S infinite-autocomplete
		```

		# Basic Usage (Minimum Configuration)
		# Usage
		```js
		import { InfiniteAutocomplete } from 'infinite-autocomplete';
		// or <script src="node_modules/infinite-autocomplete/dist/index.js"></script>
		// [dist/index.debug.js is prefered for developement]
		import InfiniteAutocomplete from 'infinite-autocomplete';
		import 'infinite-autocomplete/dist/index.css';

		// Static data source
		new InfiniteAutocomplete(document.getElementById('test'), {
		data: [
		{ text: 'Islam Attrash', value: 1},
		{ text: 'Shai Reznik', value: 2},
		{ text: 'Uri Shaked', value: 3},
		{ text: 'Salsabel Eawissat', value: 4}
		]
		});
		InfiniteAutocomplete({
		data: [
		{ text: 'Islam Attrash', value: 1},
		{ text: 'Shai Reznik', value: 2},
		{ text: 'Uri Shaked', value: 3},
		{ text: 'Salsabel Eawissat', value: 4}
		],
		onSelect: ({ id, text }) => {
		// do something useful!
		}
		}, document.getElementById('app'));

		// Dynamic data source
		new InfiniteAutocomplete(document.getElementById('test'), {
		getDataFromApi: function(text, page, fetchSize) { //Function return a Promise (http resource)
		return new Promise((resolve, reject) => {
		setTimeout(() => {
		resolve([ ..... ]);
		}, 500);
		})
		}
		InfiniteAutocomplete({
		value: 'test', // input initial value
		data: (text, page, fetchSize) => {
		return new Promise(function(resolve) {
		fetch(`http://localhost:5000/data?text=${text}&page=${page}&fetchSize=${fetchSize}`)
		.then((response) => response.json())
		.then((options) => resolve(options))
		});
		}
		}, document.getElementById('app'));
		```

		# Configurations
		The configuration object will be exposed when initializing the infinite-autocomplete component as the second argument in the type-system typings, so it can help you know what configuration to apply.
		InfiniteAutocomplete function is also a curried function! which means that we can set a specific configuration and render the autocomplete with these configurations for multiple DOM nodes!

		```js
		const citiesInfinite = InfiniteAutocomplete({
		data: () => new Promise((resolve) => {
		...
		resolve(cities);
		})
		});

		// Some page
		citiesInfinite(DOM1);

		// Another page
		citiesInfinite(DOM2);
		```

		# Options
		```js
		{
		/**
		@@ -63,5 +79,5 @@ * current value
		/**
		* data static source
		* data source
		*/
		data?: IOption[];
		data?: IOption[] \| (inputText: string, fetchSize: number, page: number) => Promise<IOption[]>;
		/**
		@@ -72,97 +88,14 @@ * Chunk fetch size
		/**
		* Customized input class to override the default input
		*/
		customizedInput?: IInputCompoenentConstructor;
		/**
		* Customized options class to override the default input
		*/
		customizedOptions?: IOptionsComponentConstructor;
		/**
		* on-select event output handler when choosing an option
		*/
		onSelect?(selectedElement: EventTarget, selectedData: IOption);
		/**
		* on-loading-state-change event output handler when choosing an option
		*/
		onLoadingStateChange?(loadingState: boolean);
		/**
		* on-error event output handler when exception thrown
		*/
		onError?(error: Error);
		/**
		* max height for the options
		*/
		maxHeight?: string;
		/**
		* data dynamic api source
		*/
		getDataFromApi?(text: string, page: number, fetchSize: number): Promise<any[]>;
		```

		# customizedInput/customizedOptions Advanced configuration
		Regards the custom implementations, they're targeting the two main component of this plugin, which is: InputComponent, OptionsComponent (The result)

		For that you've two classes exported to help you manage correctly extending with your own classes

		The Defaults implements these interfaces:

		The IInputComponent interface can be defined as:

		```js
		export interface IInputComponent {
		/**
		* Input component template string
		* @default `<input />`
		*/
		render():string;
		/**
		* onInputChange event handler
		* @param inputElement - HTMLInputElement
		* @param value - input text value
		*/
		onInputChange?(inputElement:HTMLInputElement, value:string);
		onSelect?(IOption);
		}
		```

		The IOptionsComponent interface can be defined as:

		```js
		export interface IOptionsComponent {
		/**
		* The list element tag selector
		* This value can be a tag string `ul` `div` `ol` that indicates tag name,
		* or it can be a class selector (or id selector) `.myClass`/`#myId` which is
		* returned in @render method template
		* @default `ul`
		*/
		listElementSelector:string;
		/**
		* Options component template string
		* @default `<ul></ul>` base list tag
		*/
		render():string;
		/**
		* Option row template string in Options component
		* @param option
		* @default `<li> ${value} </li>`
		* @requires one base HTML Element
		*/
		renderOption(option:IOption):string;
		Where `IOption` stands for =>
		```ts
		interface IOption {
		id: number \| string;
		text: string;
		}
		```

		# Examples
		- <a href="https://htmlpreview.github.io/?https://raw.githubusercontent.com/Attrash-Islam/infinite-autocomplete/master/Examples/ES5/Examples.html">
		See Live Examples
		</a> OR read Codes in "Examples" folder

		# Developer section
		In the package.json scripts we've 4 basic tasks:

		`build` - Build the code once

		`build:watch` - Build the code and watch for changes [developement]

		`test` - Run tests once

		`test:watch` - Run tests and watch for changes [developement]

dist/index.debug.js

infinite-autocomplete.d.ts

dist/index.js

Sorry, the diff of this file is too big to display

infinite-autocomplete - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics