[SELECT2] Full Events (ok)

https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

Thay vì mặc định tôi muốn ấn vào bức ảnh chuyển đến bài viết luôn :)

C:\Users\Administrator\AppData\Local\Temp\scp57565\home\admin\domains\yp.vn\public_html\testsearch.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
  <style type="text/css">
    .select2-container{
      width: 100%!important;
     }
     .select2-search--dropdown .select2-search__field {
      width: 98%;
     }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="container">
   <h1>Test Search</h1>
   <select class="js-data-example-ajax" style="width: 300px">
     <option value="">Nhập từ khóa tìm kiếm</option>
   </select>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".js-data-example-ajax").select2({
        ajax: {
          url: 'https://yp.vn/phpjson.php',
          dataType: 'json',
          type: "GET",
          delay: 250,
          data: function(params) {
            return {
              q: params.term
            };
          },
          processResults: function(data) {
            var res = data.hits.hits.map(function(item) {
              return { id: item._source.post_id, text: item._source.post_title, address: item._source.meta.webbupointfinder_items_address[0].value, content: item._source.post_content,permalink: item._source.permalink};
            });
            return {
              results: res
            };
          }
        },
        placeholder: "Nhập từ khóa tìm kiếm",
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
      });
      function formatRepo (repo) {
        if (repo.loading) {
          return repo.text;
        }
        var $container = $(
          "<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-repository__avatar'><a href='"+repo.permalink+"'><img src='https://cdn.pixabay.com/photo/2017/02/07/09/45/city-2045453_1280.jpg'></a></div>" +
            "<div class='select2-result-repository__meta'>" +
              "<div class='select2-result-repository__title'></div>" +
              "<div class='select2-result-repository__content'></div>" +
              "<div class='select2-result-repository__address'></div>" +
            "</div>" +
          "</div>"
        );
        $container.find(".select2-result-repository__title").text(repo.text);
        $container.find(".select2-result-repository__content").html(repo.content);
        $container.find(".select2-result-repository__address").text(repo.address);
        return $container;
      }
      function formatRepoSelection (repo) {
        return repo.full_name || repo.text;
      }
      $('.js-data-example-ajax').on('select2:select', function (e) {
        var data = e.params.data;
        window.location.href = data.permalink;
      });
    });
  </script>
  <style type="text/css">
    .select2-result-repository {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .select2-result-repository__avatar {
      margin-right: 10px;
    }
    .select2-result-repository__avatar >a {
      display: block;
      width: 250px;
      height: 166px;
    }
    .select2-result-repository__title {
      font-weight: 700;
    }
    .select2-result-repository__avatar img {
      width: 100%;
      height: height:100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    .select2-result-repository__content {
      text-transform: lowercase;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .select2-result-repository__address {
      text-transform: lowercase;
      font-weight: 600; 
    }
  </style>
</body>
</html>

Previous[SELECT2] Common problems Select2 does not function properly when I use it inside a Bootstrap modal Next[SELECT2] lấy dữ liệu của wp, wordpress để thực hành (ok)

Last updated 4 years ago