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" } );
}
Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style05

Timeline style05

Timeline style01

Timeline style01

Tablet style code texte

Tablet style code texte

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Image hover Flip Flap Style

Image hover Flip Flap Style

Header Aside Footer Admin

Header Aside Footer Admin

Form Création de compte style animée

Form Création de compte style animée

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery