HV-Autocomplete

HV-Autocomplete is the most flexible autoсomplete for styling and developing. You can do something more then with another autoсomplets. Firstly goal HV-Autocomplete is you may do Horizontal search results. See examples below.

var options = {
  input: document.querySelector("#input"),
  data: data,
  horizontal: true
};

new HVAutocomplete(options);

Also you can test that on your computer. For this:

• Clone the project;
• Start commands npm install, gulp browser-sync;

Getting started

Just download our HV-Autocomplete plugin and include to your HTML.

<!-- JS file -->
<script src="path/to/hv-autocomplete.js"></script>

Also you can use our css files. Download.

<!-- CSS file -->
<link rel="stylesheet" href="path/to/hv-autocomplete.css">

Basic

HV-Autocomplete plugin is very simple to use. Just create object HVAutocomplete and set options for it.

Example

Code

var options = {
  input: document.querySelector("#input"),
  data: data
};

new HVAutocomplete(options);

Data types

HV-Autocomplete get two data types: default, for categories.

Default

[
  {"name": "Alex", "url": "http://..."},
  {"name": "Page", "url": "http://..."},
  ...
]

For categories

{
  "category1": {
    "title": "Category 1",
    "data": [
      {
        "name": "Page Warner",
        "url": "http://..."
      },
      ... ]
  },
  "category2": {
    "title": "Category 2",
    "data": [
      {
        "name": "Golden Curtis",
        "url": "http://..."
      },
      ... ]
  },
  ...
}

Acync get data

If you want to load your asynchronous data you can pass function to option data. Function must return object of shape. See example below.

var options = {
  input: document.querySelector("#main"),
  asyncData: function(input) {
    return {
      method: "GET",
      url: "/search/data.json?query=" + input.value,
      success: function(response) {
        console.log(response);
      }
    };
  }
};

new HVAutocomplete(options);

Categories

With HV-Autocomplete you can separate your data to categories. For this use categories: true option.

Example

Code

var options = {
  input: document.querySelector("#input"),
  data: data
};

new HVAutocomplete(options);

Data type

{
  "category1": {
    "title": "Category 1",
    "data": [
      {
        "name": "Page Warner",
        "url": "http://..."
      },
      ... ]
  },
  "category2": {
    "title": "Category 2",
    "data": [
      {
        "name": "Golden Curtis",
        "url": "http://..."
      },
      ... ]
  },
  ...
}

Horizontal categories

We want that user can use HV-Autocomplete in horizontal orientation. For this simple use right data type - see above.

Code

var options = {
  input: document.querySelector("#input"),
  data: data,
  horizontal: true
};

new HVAutocomplete(options);

Search

HV-Autocomplete has two search methods for your convenience:

• Default search
• Global search - looking all matches after space. For this search use globalSearch: true

Example

Code

var options = {
  input: document.querySelector("#input"),
  data: data,
  globalSearch: true
};

new HVAutocomplete(options);

Styling

We took care that styling will easy, so include two options for this:

• resultClass
• resultStyles

resultClass

It option replase default class to your class result block and child nodes.

For example:

div.hv-result => div.your-class-result
  └── p.hv-element-no-category => div.your-class-element-no-category

resultStyles

It options set inline styles for result block.

Structure child nodes result block

Default structure

div.hv-result
  └── a.hv-element-no-category          => option

Structure with category

div.hv-result
  └── div.hv-block-category             => block if has category
        ├── h3.hv-title-category        => title category
        └── a.hv-element-with-category  => option

Event onOptionClick

This event is calling when click on option and return event, name, url, nameCategory parameters.

Example

var options = {
  input: document.querySelector("#input"),
  data: data,
  onOptionClick: function(event, name, url, nameCategory){
    console.log(name);
  }
};

new HVAutocomplete(options);

API

Options	Default value	Type	Description
data	none	object	See above. Required field
input	none	HTML element	Set HTML element. Required field
maxLength	5	number	Set maximum search result.
horizontal	false	boolean	Set your autocomplete horizontal See above.
globalSearch	false	boolean	Set type search. See above.
resultClass	hv-result	string	Set class for result. See above.
resultStyles	null	object	Set inline styles for result. See above.
onOptionClick	null	function	Callback after click on option

License

hv-autocomplete is Copyright © 2015-2018 Codica. It is released under the MIT License.

About Codica

We love open source software! See our other projects or hire us to design, develop, and grow your product.