@sedeh/flexible-auto-complete v3.2.1

Welcome to Flexible Autocomplete!

Have you ever wanted to have a ready to use auto-complete that can easily fit in your components? Have you thought of what it takes to get there? With flexible auto-complete, you can configure an auto-complete to perform task the way you want it.

NOTE: Starting with version 1.1.0 this library is compatible with Angular 6+.

NOTE: Starting with version 1.3.1 you need to import this library through @sedeh/flexible-auto-complete.

Please send your requests or comments through the link provided below:

Live Demo | NPM | Comments/Requests

EXPORTS:
  FlexibleAutoCompleteComponent

Features

• Responsive
• ADA Compliant
• Configurable

Attributes

Events

How it can be done?

You will need to set the auto-complete in your HTML content:

In this example:
'source' URL will be concatinated with typed charachters. so, if url is http://somethig/keywords, you need to supply 'http://somethig/' or if it is 'http://somethig?param=keyword' you need to supply 'http://somethig?param='. If source URL is supplied, no need to supply data as it will be ignored.


<flexible-auto-complete 
  icon="fa fa-search"
  message="find user" 
  placeholder="Please enter a name" 
  direction="vertical"
  delayby="300"
  triggeron="2"
  animateonresult="true"
  allowdropdown="true"
  viewport="200px"
  [template]="tab2" 
  [data]="data"
  [keymap]="['fname','lname']"
  (onsearch)="onsearch($event)"
  (onselect)="onselection($event)"></flexible-auto-complete>
  
<flexible-auto-complete 
  icon="fa fa-search"
  message="find user" 
  placeholder="Please enter a name" 
  prefetchdata="true"
  source="http://jsonplaceholder.typicode.com/users/"
  remotepath="_body"
  [keymap]="['name']"
  (onselect)="onselection($event)"></flexible-auto-complete>

<ng-template #tab2 let-detail="data">
  <img [src]="detail.picture" width="10px" />
  <span class="info">
      <span><span class="bold">Name:</span> {{detail.fname}} {{detail.lname}}</span>
      <span><span class="bold">Age:</span> {{detail.age}}</span>
      <span><span class="bold">Phone:</span> {{detail.phone}}</span>
    </span>
</ng-template>

You will also need to implement a few functions

  onselection(event) {
    // decide on what to do with the evet
  }

If you want to overide any parts of default look, you can use ::ng-deep and do the following:

CSS Example:

::ng-deep .viewport {
    li {
        display: flex;
        flex-direction: row;

        img {
            border-radius: 50%;
            border: 1px splid red;
            flex: 0 0 2%;
            float: left;
            width: 25px;
            height: 25px;
        }
        .info {
            font-size: 0.9rem;
            display: flex;
            flex-direction: column;
            float: left;
            margin-left: 5px;
            flex: 1;

            .bold {
                font-weight: bold;
            }
        }
    }
}

Version History

How to include font-awesome in your project?

In your project root folder, find and open the file 'angular-cli.json' in any editor Locate the styles[] array and add font-awesome references directory. like:

"apps": 
	[
        {
            ....
            "styles": [
              "../node_modules/font-awesome/css/font-awesome.css"
              "styles.css"
            ],
            ...
        }
    ]