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" } );
}
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Form login 03

Form login 03

Image hover 05

Image hover 05

Image hover style border top

Image hover style border top

Input range slider HTML style01

Input range slider HTML style01

Pagination with Jquery

Pagination with Jquery

Scroll down button 01

Scroll down button 01

Timeline style07

Timeline style07

toggle switch style02

toggle switch style02