Overview

Ayfie provides a typeahead component called ViaSuggest, which can be easily integrated into web pages. It only consists of a simple JavaScript, an optional CSS-file and a small html-markup which needs to be integrated to the external website.

While entering a query into the search field ViaSuggest will search for matching hits and displays them instantly within a list view. By selecting a hit via mouse or keyboard - the form is submitted.

ViaSuggest replaces an existing input field that is part of a search form on an external website. By adding the required library to the page, it enhances the search form by the typeahead functionality.

Example

After successful integration you should see this result on your website:

Setup

The following steps describe how to integrate ViaSuggest on an existing webpage based on this sample markup:

Sample HTML Markup


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
<body>
<h1>Website</h1>

<form name="form" action="javascript:formAction();" method="get">
    <div class="viasuggest-input-wrapper">
        <input name="viasuggest-input" class="viasuggest-input" type="text" />
    </div>
    <button type="submit"><span>Search</span></button>
</form>

<script type="text/javascript">
    function formAction() {
        console.log('search for: ' + document.getElementsByName('viasuggest-input')[0].value);
    }
</script>
</body>
</html>

Step 1: Library Integration

Add the ViaSuggest javascript and - if applicable - the optional stylesheet to your webpage. The exact urls are generated by Ayfie.

ViaSuggest Libraries

The html markup generated by the component is very basic and can be easily styled. We recommend using our default style sheet as a starting point. All elements can be overwritten if needed.

Step 2: Add html-Markup

Add the <viasuggest> tag to your form. It should be placed around your existing input field, hence it will replace it completely.

The <viasuggest> contains two attributes: On the one hand 'data-url', which is required and will also be provided by Ayfie. On the other hand 'data-placeholder', which is optional. Here can be set a placeholder for the input field.

Enhanced Form


<form name="form" action="javascript:formAction();" method="get">
    <viasuggest class="viasuggest" data-url="" data-placeholder="Search">
        <div class="viasuggest-input-wrapper">
            <input name="viasuggest-input" class="viasuggest-input" type="text" />
        </div>
    </viasuggest>
    <button type="submit"><span>Search</span></button>
</form>

Step 3: Add Event-Listener

Since the ViaSuggest is neither attached to your submit button nor to your form, you have to listen for an event In order to submit the form after selection an item.

The emitted custom event is called 'uk-search' and contains the selected item as detail for further reference if needed.

If the result container is opened, an event called 'viasuggest-open' is emitted. In this case, a style class is added to the root tag, if the container is opened. If the container is closed, the style class will be removed.

Event Listener


<script type="text/javascript">
    document.addEventListener('uk-search', function (e) {
        var selectedItem = e.detail;
        console.log('selected item: ' + selectedItem);

        var suggestForm = document.getElementsByName('form')[0];
        suggestForm.submit();
    }, false);

    document.addEventListener('viasuggest-open', function (e) {
        var isContainerOpen = e.detail;
        var containerOpenStyleClass = 'viasuggest-open';

        if (isContainerOpen) {
            document.getElementsByClassName("viasuggest").item(0).classList.add(containerOpenStyleClass);
        } else {
            document.getElementsByClassName("viasuggest").item(0).classList.remove(containerOpenStyleClass);
        }
    }, false);

    function formAction() {
        console.log('search for: ' + document.getElementsByName('viasuggest-input')[0].value);
    }
</script>

That's it.

The complete example website with the ViaSuggest integration looks like this.

Complete Sample


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        
</head>
<body>
    <h1>Website</h1>

    <form name="form" action="javascript:formAction();" method="get">
        <viasuggest class="viasuggest" data-url="" data-placeholder="Search">
            <div class="viasuggest-input-wrapper">
                <input name="viasuggest-input" class="viasuggest-input" type="text" />
            </div>
        </viasuggest>
        <button type="submit"><span>Search</span></button>
    </form>

    
    <script type="text/javascript">

        document.addEventListener('uk-search', function (e) {
            var selectedItem = e.detail;
            console.log('selected item: ' + selectedItem);

            var suggestForm = document.getElementsByName('form')[0];
            suggestForm.submit();
        }, false);

        document.addEventListener('viasuggest-open', function (e) {
            var isContainerOpen = e.detail;
            var containerOpenStyleClass = 'viasuggest-open';

            if (isContainerOpen) {
                document.getElementsByClassName("viasuggest").item(0).classList.add(containerOpenStyleClass);
            } else {
                document.getElementsByClassName("viasuggest").item(0).classList.remove(containerOpenStyleClass);
            }
        }, false);

        function formAction() {
            console.log('search for: ' + document.getElementsByName('viasuggest-input')[0].value);
        }
    </script>
</body>
</html>