выберите атрибут большого размера данных из автозаполнения поиска

Question

Я хочу выбрать атрибут большого размера данных из поиска автозаполнения пользовательского интерфейса jQuery. Когда я выбираю пакет 1 или пакет 1.1, просто атрибут с data-package = "1" div show, Когда я выбираю пакет 2 или пакет 1.2, просто атрибутс data-package = "2" div show, если я выберу pack 1 и pack 3, просто атрибут с data-package = "3" div show, и так далее.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/superhero/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Live-Search-Plugin-jQuery-e-search/e-search.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input class="search" />


<div class="package" data-package="1" data-size="10" style="">packg 1</div>
<div class="package" data-package="2" data-size="20" style="">packg 2</div>
<div class="package" data-package="3" data-size="30" style="">packg 3</div>
<div class="package" data-package="4" data-size="40" style="">packg 4</div>
<div class="package" data-package="5" data-size="50" style="">packg 5</div>
<div class="package" data-package="6" data-size="60" style="">packg 6</div>

<script type="text/javascript">
    jQuery(function() {
        var availableTags = [
          {value: "pack 1",id: 1},
          {value: "pack 1.1",id: 2},
          {value: "pack 2",id: 3},
          {value: "pack 2.2",id: 4},
          {value: "pack 3",id: 5},
          {value: "pack 3.3",id: 6},
          {value: "pack 4",id: 7},
          {value: "pack 4.4",id: 8},
          {value: "pack 5",id: 9},
          {value: "pack 5.5",id: 10},
          {value: "pack 6",id: 11},
          {value: "pack 6.5",id: 12}

        ];
        jQuery(".search").autocomplete({
          source: availableTags
        });
    });
</script>

Answer 1

Я думаю, это то, что вы пытались сделать, но это было неясно.

$(function() {
  var packs = [{
      value: "pack 1",
      id: 1
    },
    {
      value: "pack 1.1",
      id: 2
    },
    {
      value: "pack 2",
      id: 3
    },
    {
      value: "pack 2.2",
      id: 4
    },
    {
      value: "pack 3",
      id: 5
    },
    {
      value: "pack 3.3",
      id: 6
    },
    {
      value: "pack 4",
      id: 7
    },
    {
      value: "pack 4.4",
      id: 8
    },
    {
      value: "pack 5",
      id: 9
    },
    {
      value: "pack 5.5",
      id: 10
    },
    {
      value: "pack 6",
      id: 11
    },
    {
      value: "pack 6.5",
      id: 12
    }

  ];
  $(".search").autocomplete({
    source: packs,
    select: function(e, ui) {
      var item = ui.item;
      var id = 0;
      switch (true) {
        case item.id <= 2:
          id = 1;
          break;
        case item.id <= 4:
          id = 2;
          break;
        case item.id <= 6:
          id = 3;
          break;
        case item.id <= 8:
          id = 4;
          break;
        case item.id <= 10:
          id = 5;
          break;
        case item.id <= 12:
          id = 6;
          break;
      }
      $(".package").hide();
      $(".package[data-package='" + id + "']").show();
    }
  });
});

.package {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Find Package: <input class="search" />


<div class="package" data-package="1" data-size="10" style="">packg 1</div>
<div class="package" data-package="2" data-size="20" style="">packg 2</div>
<div class="package" data-package="3" data-size="30" style="">packg 3</div>
<div class="package" data-package="4" data-size="40" style="">packg 4</div>
<div class="package" data-package="5" data-size="50" style="">packg 5</div>
<div class="package" data-package="6" data-size="60" style="">packg 6</div>

Я скрываю все пакеты.Затем, когда пользователь делает выбор и, используя switch(), я могу показать желаемый пакет.

Надеюсь, это поможет.