Question

我想从jQuery UI自动完成搜索中选择大数据大小的属性当我选择pack 1或pack 1.1时，仅显示data-package =“ 1” div的属性，当我选择pack 2或pack 1.2时，仅显示data-package =“ 2” div的属性，如果我选择pack 1和pack 3，仅显示data-package =“ 3” div的属性，依此类推。

<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()时，我可以显示所需的包装。

希望有帮助。

从自动完成搜索中选择大数据大小属性

1 个答案: