How to create elements of a typehead in a div

Question

How to create elements of a typehead in a div

Navigation

#1 by (3 votes)

2

I need to develop an input that returns information from the database, but this information has to be visible in a div on the right side of the page

I tried a lot of things, but I did not get anything.

My test page:

<!DOCTYPE html>
<html>
<head>
    <title>

    </title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css">
</head>

<body>

    <div class="col-md-12">
        <br>

        <input id='#typeahead' type='text'>
        <h2>Results</h2>
        <ul id="typeahead-target"></ul>

    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scripttype="text/javascript" src="dist/js/popper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script><scripttype="text/javascript" src="dist/js/typeahead.jquery.min.js"></script>
    <script type="text/javascript" src="dist/js/typeahead.bundle.min.js"></script>



<script type="text/javascript">

    $('#typeahead').typeahead({menu: '#typeahead-target'});

</script>

</body>

</html>

Does anyone know how?

javascript html plugin typeahead

asked by anonymous 06.12.2017 / 18:51

1 answer

Algorithm with flowchart / diagram Change input color according to value

score 3 · Accepted Answer

Here is an example of how to do what you need:

$(function () {

  v1 = $("#elemento").val();

  $('#elemento').keyup(function() {
      
      v1 = $("#elemento").val();
      $('#texto').append("<p>"+v1+"</p>");
      $("#texto").show();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script><inputtype='text'id='elemento'name='elemento'value=''><divid="texto" style='height: 200px; background-color: blue; margin-top: 20px; display: none;'></div>