title: Search both text and id with Select2.js
body: <p>I'm using "Select2" plugin for my select to display all "Suppliers" from my table in SQL. I used Ajax to get all Suppliers and generated <code>&lt;option&gt;</code> tags with value and text for my select. I bound all <code>&lt;option&gt;</code> tags into my select and set "Select2" function for it. I have formatted the result to display two column like this:<br>
  <a href="https://i.stack.imgur.com/b1Prv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1Prv.png" alt="enter image description here"></a></p>
  
  <p>I read the document of Select2 for formatting the searching. But I just can search the text (the second column in the picture above).</p>
  
  <p>Here is the code I used for the result formatting and searching:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> //Get NhaCungCap
  function GetNhaCungCap() {
      ajaxFunc("/Services.aspx/GetAllNhaCungCap", { pageNumber: 0 }, function (data) {
          var json = JSON.parse(data.d);
          FillNhaCungCap(json);
      })
  }
  //Binding NhaCungCap
  function FillNhaCungCap(json) {
      var html = "";
      $.each(json, function (k, v) {
          html += "&lt;option value=" + v.MaNhaCungCap + "&gt;" + v.TenNhaCungCap + "&lt;/option&gt;";
      });
  
      $("#slNCC").html(html); //Bind &lt;option&gt; tag into select "slNCC"        
  }
  //Format slNCC using select2
   $('#slNCC').select2({
                  placehoder: 'Tìm kiếm nhà cung cấp theo mã hoặc tên (F4)',
                  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                  data: function (repo) {
                      return JSON.stringify({ q: repo.text || repo.id, page: params.page });// search term  
                  },
                 
                  templateResult: formatRepo,
                  templateSelection: formatRepoSelection
  });  
  //function to format Result
  function formatRepo(repo) {
      if (repo.loading) {
          return  repo.id || repo.text;
      }
      var markup = "";
  
      markup += '&lt;div class="row"&gt;';
      markup += '&lt;div class="col-sm-4"&gt;' + repo.id + '&lt;/div&gt;';
      markup += '&lt;div class="col-sm-8"&gt;' + repo.text + '&lt;/div&gt;';
      markup += '&lt;/div&gt;';
      return markup;
  }
  
  function formatRepoSelection(repo) {
      return repo.full_name || repo.text;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using select2 version Select2 4.0.6-rc.1. <a href="https://github.com/select2/select2" rel="nofollow noreferrer">Link select2 from GitHub</a></p>