Scout24/as24-autocomplete

Name: as24-autocomplete

Owner: AutoScout24

Owner: AutoScout24

Description: Autocomplete component

Created: 2016-10-19 08:33:42.0

Updated: 2016-11-02 16:43:53.0

Pushed: 2017-11-29 12:54:42.0

Homepage: null

Size: 520

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

as24-autocomplete

Build your autocomplete from the building blocks. Put input, data source and suggestions list inside the as24-autocomplete and you get it. For the moment we have these:

• Input (as24-autocomplete-input)
• Suggestions lists (more info)
• Plain list (as24-plain-suggestions-list)
• Grouped list (as24-grouped-suggestions-list)
• Data sources (more info)
• Plain data source (as24-plain-data-source)
• Grouped data source (as24-grouped-suggestions-list)

Please, check the demo out.

Getting Started

Run the demo

install
 dev

Goto: http://localhost:3000

How to include in your project

install --save-dev as24-autocomplete

Include the scripts into your build process:

All at once:

ire('as24-autocomplete');

… or just what is needed:

t input = require('as24-autocomplete/src/as24-autocomplete-input');
t dataSource = require('as24-autocomplete/src/data-sources/plain-data-source');
t list = require('as24-autocomplete/src/suggestions-lists/plain-suggestions-list');
t dispatcher = require('as24-autocomplete/src/as24-autocomplete-dispatcher');

t();
Source();
();
atcher();

Using the second approach can save you a few KBs. But… it's up to you.

Include the styles into your project. You can use SASS module importer (this one for example)

ort 'as24-autocomplete'

Or just @import it from node_modules:

ort 'node_modules/as24-autocomplete/src/as24-autocomplete.sass'

Example

This is how you add the autocomplete itself:

4-autocomplete empty-list-message="No items satisfying your request">
nput data-role="value" type="hidden" name="makeId">
s24-autocomplete-input class="as24-autocomplete__input-wrapper">
<input type="text" data-role="user-query" class="as24-autocomplete__input" placeholder="Optional placeholder">
<div class="as24-autocomplete__icon-wrapper">
  <div class="as24-autocomplete__icon-dropdown">
    <svg class="as24-autocomplete__icon-dropdown__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 7" height="16px" width="16px">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 7L0 .5.5 0l6 6 5.9-6 .6.5"></path>
    </svg>
  </div>
  <div class="as24-autocomplete__icon-cross">
    <svg class="as24-autocomplete__icon-cross__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px">
      <rect x="-2" y="6.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.2215 7.7782)" width="20" height="1"/>
      <rect x="-3" y="6.8" transform="matrix(0.7071 0.7071 -0.7071 0.7071 7.7786 -3.2215)" width="20" height="1"/>
    </svg>
  </div>
</div>
as24-autocomplete-input>
-- <ul class="as24-autocomplete__list"></ul> -->
s24-plain-suggestions-list data-role="list" class="as24-autocomplete__list"></as24-plain-suggestions-list>
s24-plain-data-source role="data-source">
<item key="1" value="qwer"></item>
<!-- ... -->
as24-plain-data-source>
24-autocomplete>

Migrations

Migration to 2.x

The new components has been introduced so that you can configure your autocomplete. These are:

• as24-plain-suggestions-list
• as24-grouped-suggestions-list
• as24-plain-data-source
• as24-grouped-items-data-source

When you use as24-grouped-items-data-source you should place the items within group element.

Please, check the demo out

Migration to 1.x

Please, pay attention to data-role="user-query" and data-role="value" attributes for the inputs.

The End

Happy autocompleting :)