nodes-ui/doc/pages/components/forms/auto-complete.html

UI Components for Nodes Backends

---
title: Auto-complete
layout: nested-component.html
github: components/forms/auto-complete.html
---
<h1 id="topOfPage" class="docs--page-header">
    Auto-complete
    <a class="docs--third-party-link" href="https://www.devbridge.com/sourcery/components/jquery-autocomplete/" target="_blank">jquery-autocomplete</a>
</h1>

<p class="docs--page-description">
    Auto-complete components are ajax powered search fields. The input returns a list of results filtered based on the query, highlighting the query in each result.
    <br>
    <strong>NOTE: This plugin <span class="text-danger">CAN ONLY</span> be configured and initialized through javascript.</strong>
    <br>
</p>

<h2 id="jsSetup" class="docs--section-header">
    Setup
</h2>
<p class="docs--section-description">
    The minimum required configuration for the auto-complete component takes two functions:
    <br>
    <code>serviceUrl</code> and <code>transformResult</code> which both needs to return a value detailed below.
</p>

<h3 id="jsSetupServiceUrl" class="docs--section-header">
    1 serviceUrl
</h3>
<p class="docs--section-description">
    The serviceUrl function must return a full url including query and any optional parameters.
    <br>
    The function provides the query as an argument.
    <br>
    Example:
</p>
<pre class="docs--syntax-highlight"><code>
serviceUrl: function(query) {
    return 'https://api.usa.gov/jobs/search.json?query=' + query;
},
</code></pre>
<h3 id="jsSetupTransformResult" class="docs--section-header">
    2 transformResult
</h3>
<p class="docs--section-description">
    The transformResult function must return an object:
    <br>
    <code>{query: 'the_query_to_highlight', value: 'the_value_to_show', data: null}</code>
    <br>
    The function provides the Ajax response and the query as arguments.
    <br>
    The data property is optional but can be used to group results together with the groupBy option.
    <br>
    Example:
</p>
<pre class="docs--syntax-highlight"><code>
transformResult: function(response, query) {
    return {
        query: query,
        suggestions: $.map(response, function(item) {
            return {value: item.position_title, data: {location: item.locations[0]}};
        })
    };
}
</code></pre>
<h3 id="jsSetupInit" class="docs--section-header">
    3 Initialize
</h3>
<p class="docs--section-description">
    Now it's just a matter of wrapping a <code>&lt;input type="text"/&gt;</code> in a <code>&lt;div&gt;</code> wich must have the <code>auto-complete</code> class and initializing the plugin:
</p>
<pre class="docs--syntax-highlight"><code>
$('.auto-complete').autoCompleteWrapper({
    serviceUrl: ...,
    transformResult: ...
});
</code></pre>

<p class="docs--section-description">
    Search suggestions for the demos below: <code>nurse, mechanic, pilot, cook</code>
</p>

<h2 id="defaultAutocomplete" class="docs--section-header">
    Default
</h2>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <div class="form-group">
            <label for="autocomplete">
                Search
            </label>
            <div class="auto-complete">
                <input type="text" name="jobs" id="autocomplete" class="form-control auto-complete__input"/>
            </div>
        </div>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputJS">JS</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
            <div  role="tabpanel" data-lang="js" class="docs--code-example__code-block tab-pane" id="outputJS">
<pre><code class="lang-js">var autoCompleteEndpoint = 'https://api.usa.gov/jobs';
$('.auto-complete').autoCompleteWrapper({
    serviceUrl: function(query) {
        return autoCompleteEndpoint + '/' + 'search.json?query=' + query;
    },
    transformResult: function(response, query) {
        response = JSON.parse(response);
        return {
            query: query,
            suggestions: $.map(response, function(item) {
                return {value: item.position_title, data: {location: item.locations[0]}};
            })
        }
    },
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    deferRequestBy: 500,
    groupBy: 'location'
});
</code></pre>
            </div>
            <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
            </div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="inverseAutocomplete" class="docs--section-header">
    Inverse
</h2>
<p class="docs--section-description">
    Invert the colors of the auto-complete results by adding a <code>auto-complete--inverse</code> modifier class to the <code>&lt;div class="auto-complete"&gt;</code>
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <div class="form-group">
            <label for="autocomplete">
                Search
            </label>
            <div class="auto-complete auto-complete--inverse">
                <input type="text" name="jobs" id="autocomplete" class="form-control auto-complete__input"/>
            </div>
        </div>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputJS">JS</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
            <div  role="tabpanel" data-lang="js" class="docs--code-example__code-block tab-pane" id="outputJS">
<pre><code class="lang-js">var autoCompleteEndpoint = 'https://api.usa.gov/jobs';
$('.auto-complete').autoCompleteWrapper({
    serviceUrl: function(query) {
        return autoCompleteEndpoint + '/' + 'search.json?query=' + query;
    },
    transformResult: function(response, query) {
        response = JSON.parse(response);
        return {
            query: query,
            suggestions: $.map(response, function(item) {
                return {value: item.position_title, data: {location: item.locations[0]}};
            })
        }
    },
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    deferRequestBy: 500,
    groupBy: 'location'
});
</code></pre>
            </div>
            <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
            </div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>