Autocomplete

The Autocomplete component displays results in list form. You can also manipulate certain behaviors.

Initializing the component.

Start by integrating the template below inside a h_field component.

autocompletefield

<div class="h_field">
    <div class="h_autocomplete" id="myAutocomplete"></div>
</div>

<div class="h_field">
    <div class="h_autocomplete" id="myAutocomplete"></div>
</div>

Use Autocomplete.fill() and Autocomplete.clear() to feed the component. In the following example, you will also find the container and callback parameters.

autocompletefield

<button type="button" id="btnClear_1">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_1">
    <div class="h_autocomplete" id="myAutocomplete_1"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch = document.querySelector("#mySearch_1");
    inputSearch.oninput = function() {
        Autocomplete.fill({
            container: "#myAutocomplete_1",
            callback: function (tgtContainer) {
                tgtContainer.innerHTML = "Typing...";
            }
        });
    };

    var buttonClear = document.querySelector("#btnClear_1");
    buttonClear.onclick = function() {
        Autocomplete.clear({
            container: "#myAutocomplete_1",
            callback: function () {
                // your code
            }
        });
    };
})
</script>

<button type="button" id="btnClear_1">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_1">
    <div class="h_autocomplete" id="myAutocomplete_1"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch = document.querySelector("#mySearch_1");
    inputSearch.oninput = function() {
        Autocomplete.fill({
            container: "#myAutocomplete_1",
            callback: function (tgtContainer) {
                tgtContainer.innerHTML = "Typing...";
            }
        });
    };

    var buttonClear = document.querySelector("#btnClear_1");
    buttonClear.onclick = function() {
        Autocomplete.clear({
            container: "#myAutocomplete_1",
            callback: function () {
                // your code
            }
        });
    };
})
</script>

You can inject data into the Autocomplete component using the Autocomplete.charge() method.
The injected data must be an object array with a label and bind key.

autocompletefield

<button type="button" id="btnClear_2">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_2">
    <div class="h_autocomplete" id="myAutocomplete_2"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch2 = document.querySelector("#mySearch_2");
    inputSearch2.oninput = function() {
       Autocomplete.charge({
           field: "#mySearch_2",
           container: "#myAutocomplete_2",
           datas: [
               {"label":"john","bind":"doe"},
               {"label":"foo","bind":"other"}
           ],
           callback: function (tgtContainer, bind) {
               alert("Value selected: "+bind);
           }
       });
    };

    var buttonClear2 = document.querySelector("#btnClear_2");
    buttonClear2.onclick = function() {
       Autocomplete.clear({
           container: "#myAutocomplete_2"
       });
    };
})
</script>

<button type="button" id="btnClear_2">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_2">
    <div class="h_autocomplete" id="myAutocomplete_2"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch2 = document.querySelector("#mySearch_2");
    inputSearch2.oninput = function() {
       Autocomplete.charge({
           field: "#mySearch_2",
           container: "#myAutocomplete_2",
           datas: [
               {"label":"john","bind":"doe"},
               {"label":"foo","bind":"other"}
           ],
           callback: function (tgtContainer, bind) {
               alert("Value selected: "+bind);
           }
       });
    };

    var buttonClear2 = document.querySelector("#btnClear_2");
    buttonClear2.onclick = function() {
       Autocomplete.clear({
           container: "#myAutocomplete_2"
       });
    };
})
</script>

autocompletefield

<button type="button" id="btnClear_3">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_3">
    <div class="h_autocomplete" id="myAutocomplete_3"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch3 = document.querySelector("#mySearch_3");
    inputSearch3.oninput = function() {
        Autocomplete.fill({
            container: "#myAutocomplete_3",
            callback: function (tgtContainer) {
                tgtContainer.innerHTML = "Typing...";
            }
        });
    };

    var buttonClear3 = document.querySelector("#btnClear_3");
    buttonClear3.onclick = function() {
        Autocomplete.clear({
            container: "#myAutocomplete_3",
            callback: function () {
                // your code
            }
        });
    };
})
</script>

<button type="button" id="btnClear_3">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_3">
    <div class="h_autocomplete" id="myAutocomplete_3"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch3 = document.querySelector("#mySearch_3");
    inputSearch3.oninput = function() {
        Autocomplete.fill({
            container: "#myAutocomplete_3",
            callback: function (tgtContainer) {
                tgtContainer.innerHTML = "Typing...";
            }
        });
    };

    var buttonClear3 = document.querySelector("#btnClear_3");
    buttonClear3.onclick = function() {
        Autocomplete.clear({
            container: "#myAutocomplete_3",
            callback: function () {
                // your code
            }
        });
    };
})
</script>

autocompletefield

<button type="button" id="btnClear_4">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_4">
    <div class="h_autocomplete" id="myAutocomplete_4"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch4 = document.querySelector("#mySearch_4");
    inputSearch4.oninput = function() {
       Autocomplete.charge({
           field: "#mySearch_4",
           container: "#myAutocomplete_4",
           datas: [
               {"label":"john","bind":"doe"},
               {"label":"foo","bind":"other"}
           ],
           callback: function (tgtContainer, bind) {
               alert("Value selected: "+bind);
           }
       });
    };

    var buttonClear4 = document.querySelector("#btnClear_4");
    buttonClear4.onclick = function() {
       Autocomplete.clear({
           container: "#myAutocomplete_4"
       });
    };
})
</script>

<button type="button" id="btnClear_4">Clear()</button>
<div class="h_field">
    <input type="text" id="mySearch_4">
    <div class="h_autocomplete" id="myAutocomplete_4"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var inputSearch4 = document.querySelector("#mySearch_4");
    inputSearch4.oninput = function() {
       Autocomplete.charge({
           field: "#mySearch_4",
           container: "#myAutocomplete_4",
           datas: [
               {"label":"john","bind":"doe"},
               {"label":"foo","bind":"other"}
           ],
           callback: function (tgtContainer, bind) {
               alert("Value selected: "+bind);
           }
       });
    };

    var buttonClear4 = document.querySelector("#btnClear_4");
    buttonClear4.onclick = function() {
       Autocomplete.clear({
           container: "#myAutocomplete_4"
       });
    };
})
</script>

Class	Definition
h_autocomplete	Create an autocomplete component.

Methods	Definition
Autocomplete.fill({})	Prepare fill() method.
Autocomplete.fill({container:"selector"})	Target autocompletion with a selector.
Autocomplete.fill({callback:function(target)})	Optional. Executes a callback. Here, "target" is the autocomplete.
Autocomplete.clear({})	Prepare clear() method.
Autocomplete.clear({container:"selector"})	Target autocompletion with a "selector".
Autocomplete.clear({callback:function()})	Optional. Executes a callback.
Autocomplete.charge({})	Prepare charge() method.
Autocomplete.charge({field:"selector"})	Target the field with a "selector".
Autocomplete.charge({container:"selector"})	Target autocompletion with a "selector".
Autocomplete.charge({datas:[{"label":"...","bind":"..."}, ...]})	The "datas" key is used to load an array of data. Each item in the array has "label" and "bind".
Autocomplete.charge({callback:function(target, bind)})	Optional. Executes a callback. Here, "target" is the autocomplete. "bind" is the value selected.