从自动完成搜索中选择大数据大小属性 [英] select large data-size attribute from autocomplete search

问题描述

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

I want to select large data-size attribute from jQuery UI autocomplete search When I select pack 1 or pack 1.1, just attribute with data-package="1" div show, When I select pack 2 or pack 1.2, just attribute with data-package="2" div show, If I select pack 1 and pack 3, just attribute with data-package="3" div show, so on.

<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>

推荐答案

我认为这是您要尝试执行的操作，但尚不清楚.

I think this is what you were trying to do, but it was not clear.

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

I hide all the packages. Then when the user makes a selection, and using a switch() I can show the package that is desired.

希望有帮助.

这篇关于从自动完成搜索中选择大数据大小属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！