How to create elements of a typehead in a div

Asked

Viewed 54 times

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 got nothing.

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>
    <script type="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>
    <script type="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

1 answer

3


Here’s 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>


<input type='text' id='elemento' name='elemento' value=''>


<div id="texto" style='height: 200px; background-color: blue; margin-top: 20px; display: none;'></div>

  • serve! that I wanted, just need to adapt

Browser other questions tagged javascript html plugin typeahead

You are not signed in. Login or sign up in order to post.