Comment intégrer yamli dans une input

<!DOCTYPE html>
<html>
<head>
  <title>COMMENT INTÉGRER YAMLI DANS UNE INPUT </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="COMMENT INTÉGRER YAMLI DANS UNE INPUT">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container mt-5">
    <header class="text-center">
      <h5>Comment écrire en francais et récupérer des suggestions en araba avec YAMLI dans une input</h5>
    </header>
    <form action="" class="row mx-auto">
      <div class="form-group col-lg-6 col-12">
        <label for="inputname">Nom complet (AR ou FR):</label>
        <input type="text" dir="rtl" class="form-control" id="inputname" placeholder="Nom complet" name="inputname" required>
      </div>
    </form>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://api.yamli.com/js/yamli_api.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

                                    
if (typeof(Yamli) == "object" && Yamli.init( { uiLanguage: "fr" , startMode: "onOrUserDefault" } ))
{
  Yamli.yamlify( "inputname", { settingsPlacement: "bottomLeft" } );
}
Timeline style03

Timeline style03

Table Responsive with css 01

Table Responsive with css 01

Responsive image grid

Responsive image grid

Nav Menu style02

Nav Menu style02

Loading Style snake

Loading Style snake

Image hover style border top

Image hover style border top

Geocoded Locations

Geocoded Locations

Créer une input search animée

Créer une input search animée

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table