title: Get value from autocomplete dropdown
body: <p>I need to assign value from dropdown to autocomplete textbox ..till Now I have done this </p>
  
  <hr>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/FYypH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYypH.gif" alt="enter image description here"></a></p>
  
  <hr>
  
  <hr>
  
  <p>But You can see I can't assign  value from Dropdown to textbox ..
  I have implemented auto complete feature by a JQuery PlugIn "Prop.js"</p>
  
  <p>this is the code I have created </p>
  
  <pre><code>  &lt;link href="~/Content/popr.css" rel="stylesheet" /&gt;
    &lt;script src="~/Scripts/popr.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/popr.min.js"&gt;&lt;/script&gt;
  
   &lt;div id="address" &gt;
  
   &lt;label&gt;Country&lt;/label&gt;
  
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;@Html.TextBox("Country")&lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="popr" data-id="demo"&gt;^&lt;/div&gt;
                  &lt;div class="popr-box" data-box-id="demo"&gt;
  
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
  
      $("#Country").autocomplete({
          source: function (request, response) {
  
              $.ajax({
                  url: "/Location/GetAllCountry",
                  type: "POST",
                  dataType: "json",
                  data: { term: request.term },
                  success: function (data) {
                      response(data);
  
                  }
              })
          },
          appendTo: '#menu-container',
          messages: {
              noResults: "", results: ""
          }
      });
  
      $.ajax({
          url: "/Location/GetAllCountry",
          type: 'POST',
          data: { term: "" },
          success: function (states) {
  
              var $select = $('div[data-box-id="demo"]');
              $.each(states, function (i, state) {
                  $('&lt;option&gt;', {
                      value: state
                  }).html(state).appendTo($select)
                  .addClass("popr-item");
              });
          },
          error: function (xhr) { alert("Something seems Wrong"); }
      });
  
  });
  
  $('.popr').popr();
  
  
  $('.popr').popr({
      'speed': 200,
      'mode': 'bottom'
  });
  </code></pre>
  
  <p></p>
  
  <p>I have searched the solution the tried for a click inside div to get selected value </p>
  
  <pre><code>$(".popr-item").click(function (e) {
      e.stopPropagation();
  
  });
  
  $(".popr-box").click(function (e) {
      e.stopPropagation();
      alert("popr-box");
  });
  </code></pre>
  
  <p>this is not working </p>
  
  <p>I tried another plugin "chosen" .. But it fails in cascading dropdown ..I am not in a position to try another plugin ... I strictly want to use by this way</p>
  
  <p>if there is another plugin available , I need to see example with cascading dropdown specifically</p>
  
  <p>I just need selected value from dropdown , How Can I achieve this ?</p>