CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-5
Code Guy
Code Guy

Reputation: 3198

Bootstrap Dropdown with insert text action

I have a bootstrap drop down menu which can be used to build the expresssion when clicked on the menu item as shown. For example the dropdown when clicked it should be inserting the data-value text of the menu item into the textbox As you see When "Action" is clicked it should insert {{Action}} in the textbox, then the user can type " Hello " and then when he clicks some other item "Something else here" it will insert "{{Something else here}}" in the textbox input.

enter image description here

I have tried with

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


  </head>
  <body>
    <h1>Dropdown Suggest</h1>

        <div class="input-group input-group-sm ">
          <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
          <div class="input-group-append input-group-sm">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
              <a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
              <a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>                                    
            </div>
          </div>
        </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Views: 887

Answers (1)

Simo OM
Simo OM

Reputation: 139

You can use click function to insert data value in input field

$(function(){

  $('.dropdown-item').click(function(){
    var value = $(this).data('value');
    $('.form-control').val(value);
  });
  
});
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


  </head>
  <body>
    <h1>Dropdown Suggest</h1>

        <div class="input-group input-group-sm ">
          <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
          <div class="input-group-append input-group-sm">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
              <a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
              <a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>                                    
            </div>
          </div>
        </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 1

Related Questions