[SELECT2] opening when a result is selected (ok)

https://jeesite.gitee.io/front/jquery-select2/4.0/options.htm

C:\xampp\htdocs\php\lang.php

<html lang="en">
<head>
  <title>jquery select2 ajax php example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
  <div class="container">
    <form id="frm">
      <h1>Solution 1</h1>
      <div class="row">
        <div class="col-4">
          <div class="form-group">
            <label for="tagInput">Get data by ajax calling</label>
            <select class="form-control" id="pictures_tag_input">
            </select>
            <small class="form-text text-muted">
              <p class="text-info">Infinite Scroll</p>
            </small>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script type="text/javascript">
  $(document).ready(function() {
    $("#pictures_tag_input").select2({
      placeholder: 'Select an option',
      closeOnSelect: false,
      templateSelection: template,
      ajax: {
        url: "https://jsonplaceholder.typicode.com/posts",
        dataType: "json",
        global: false,
        cache: false,
        delay: 250,
        minimumInputLength: 2,
        data: function(params) {
          return {
            q: params.term,
            _page: params.page || 1,
            _limit: 10 
          };
        },
        processResults: function(data, params) {
          params.page = params.page || 1;
          var datx = getNestedChildren(data);
          return {
            results: datx,
            pagination: {
              more: false
            }
          };
        } 
      }
    });
    function template(data, container) {
      return data.text;
    }
    function getNestedChildren(list) {
      var roots = [];
      for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (roots.length === 0) {
          var obj = {
            text: "User " + node.userId,
            children: [{ id: node.id, text: node.title }]
          };
          roots.push(obj);
        } else {
          var obj = {
            text: "User " + node.userId,
            children: [{ id: node.id, text: node.title }]
          };
          var rootArray = $.map(roots, function(val, i) {
            var vl = "User " + node.userId;
            if (val.text === vl) return val;
            else return undefined;
          });
          if (rootArray.length > 0) {
            var obj1 = {
              id: node.id,
              text: node.title
            };
            rootArray[0].children.push(obj1);
          } else {
            roots.push(obj);
          }
        }
      }
      return roots;
    }
  });
  </script>
</body>
</html>

Previous[SELECT2] thêm thẻ bọc vào lựa chọn ví dụ thẻ <strong/> (ok)Next[SELECT2] Full Adapters hay (ok)

Last updated 4 years ago

<html lang="en"> <head> <title>jquery select2 ajax php example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> </head> <body> <div class="container"> <form id="frm"> <h1>Solution 1</h1> <div class="row"> <div class="col-4"> <div class="form-group"> <label for="tagInput">Get data by ajax calling</label> <select class="form-control" id="pictures_tag_input"> </select> <small class="form-text text-muted"> <p class="text-info">Infinite Scroll</p> </small> </div> </div> </div> </form> </div> <script type="text/javascript"> $(document).ready(function() { $("#pictures_tag_input").select2({ placeholder: 'Select an option', closeOnSelect: false, templateSelection: template, ajax: { url: "https://jsonplaceholder.typicode.com/posts", dataType: "json", global: false, cache: false, delay: 250, minimumInputLength: 2, data: function(params) { return { q: params.term, _page: params.page || 1, _limit: 10 }; }, processResults: function(data, params) { params.page = params.page || 1; var datx = getNestedChildren(data); return { results: datx, pagination: { more: false } }; } } }); function template(data, container) { return data.text; } function getNestedChildren(list) { var roots = []; for (i = 0; i < list.length; i += 1) { node = list[i]; if (roots.length === 0) { var obj = { text: "User " + node.userId, children: [{ id: node.id, text: node.title }] }; roots.push(obj); } else { var obj = { text: "User " + node.userId, children: [{ id: node.id, text: node.title }] }; var rootArray = $.map(roots, function(val, i) { var vl = "User " + node.userId; if (val.text === vl) return val; else return undefined; }); if (rootArray.length > 0) { var obj1 = { id: node.id, text: node.title }; rootArray[0].children.push(obj1); } else { roots.push(obj); } } } return roots; } }); </script> </body> </html>