Designsystem

Champ input text 

<div class="input-group">
    <label for="text">Département</label>
    <input type="text" data-action="autocomplete" placeholder="Votre département" name="autocomplete_field">
</div>

<script src="../../js/framework/jquery-3.4.1.min.js"></script>
<script src="../../js/vendors/jQuery-Autocomplete-master/dist/jquery.autocomplete.min.js"></script>
<script>
    var countries = [{
            value: 'Ain (01)',
            data: 'Ain'
        },
        {
            value: 'Aisne (02)',
            data: 'Aisne'
        },
        {
            value: 'Allier  (03)',
            data: 'Allier'
        }
    ];
    $(document).ready(function() {
        $('input[data-action=autocomplete]').autocomplete({
            lookup: countries,
            onSelect: function(suggestion) {
                //alert(suggestion.data);
            }
        });
    })
</script>
 
<div class="input-group">
    {{#if autocomplete.label}}<label for="text">{{autocomplete.label}}</label>{{/if}}
    <input type="text" data-action="autocomplete" placeholder="{{autocomplete.placeholder}}" name="autocomplete_field">
</div>

<script src="../../js/framework/jquery-3.4.1.min.js"></script>
<script src="../../js/vendors/jQuery-Autocomplete-master/dist/jquery.autocomplete.min.js"></script>
<script>
    var countries = [
        { value: 'Ain (01)', data: 'Ain' },
        { value: 'Aisne (02)', data: 'Aisne' },
        { value: 'Allier  (03)', data: 'Allier' }
    ];
    $(document).ready(function () {
        $('input[data-action=autocomplete]').autocomplete({
            lookup: countries,
            onSelect: function (suggestion) {
                //alert(suggestion.data);
            }
        });
    })
</script>
 
{
  "autocomplete": {
    "label": "Département",
    "placeholder": "Votre département"
  }
}

There are no notes for this item.