title: How to get data with json result for searchable dropdown list?
body: <p>i'm using this jquery searchable dropdown list. But i want to bind cities with my json data. How can i do this?</p>
  
  <p>my sample: searchable dropdown list</p>
  
  <pre><code>    &lt;head&gt;
          &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  var country = ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa"];
                  $("#country").select2({
                    data: country
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;DropDown with Search using jQuery&lt;/h1&gt;
          &lt;div&gt;
              &lt;select id="country" style="width:300px;"&gt;
              &lt;!-- Dropdown List Option --&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my data from database</p>
  
  <pre><code>$.ajax({
          type: 'GET',
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          url: '/Home/GetCities'
      }).done(function (jsonObj) {
  
          $("#country").select2({
              data: jsonObj // here it is
          });
      });
  </code></pre>
  
  <p>my tables has ID and</p>
  
  <p>i want to show cities or other datas in searchable dropdown list</p>