<head>
  <script type="module" src="https://unpkg.com/html-autocomplete@[version]/dist/html-autocomplete/html-autocomplete.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/html-autocomplete@[version]/dist/html-autocomplete/html-autocomplete.js"></script>	
  ...
</head>

Add the autocomplete tag

<!--where suggestions is the list of your objects-->
<html-autocomplete placeholder="Search" mode="material" suggestions="suggestions" (itemSelected)="fuction($event)">
</html-autocomplate>

###NPM

Installation

npm i html-autocomplete --save

####Import component In you main file, add the following lines

import { defineCustomElements } from 'html-autocomplete/loader';
...

defineCustomElements(window);

Add the autocomplete tag

<!--where suggestions is the list of your objects-->
<html-autocomplete placeholder="Search" mode="material" suggestions="suggestions" (itemSelected)="fuction($event)">
</html-autocomplate>

####Angular/Ionic Only

@NgModule({
  declarations: [
  ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add this line
  bootstrap: [AppComponent]
})

Input Properties

Name	Type	Default	Description
suggestions	any[]	null	List to search
labelField	string	'name'	Label property
idField	string	'id'	Id property
placeholder	string	'Search'	Placeholder
value	string	''	Original value of input
mode	string	'material'	mode (material or bootstrap
readonly	boolean	false	Disable component
imagePathField	string	null	The field of the image path. if this field is filled, images will appear at the start of each item.
direction	string	'ltr'	direction (ltr or rtl)

Output Properties

Name	Type	Description
itemSelected	EventEmitter	Item Selected

Css Variables

Name	value	Description
--width	100%	Width of the input
--color	#000000	Color inside input
--label-color	#000000	Label Color (material)
--label-color-focus	#2196f3	Label Color when focus (material)
--border-color	#c6c6c6	Color of border
--border-color-focus	#2196f3	Color of border on focus
--font-size	18px	Font size
--label-font-size	16px	Label font size (material)
--label-font-size-focus	12px	label font size focus(material)
--margin-top	16px	Top margin
--margin-bottom	16px	Bottom margin
--margin-left	16px	Left margin
--margin-right	16px	Right margin
--suggestions-background	#fff	Background of suggestions
--suggestions-color	#000000	Text color of suggestions
--image-width	30px	Width of the images
--image-height	30px	Height of the images

Thanks for reading

Keywords

FAQs

What is html-autocomplete?

Is html-autocomplete popular?

Is html-autocomplete well maintained?

Package last updated on 21 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

html-autocomplete