选择自动完成搜索大型数据大小属性(select large data-size attribute

我想当我选择组1从jQuery用户界面自动完成搜索选择大的数据大小属性或包1.1，只需用数据包=“1” DIV节目属性，当我选择组2或包1.2，刚好与DATA-属性包=“2” DIV节目，如果我选择组1和组3，只是用数据包属性=“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>

我想这是你试图做的，但现在还不清楚。

 $(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()我可以显示所期望的包。

希望帮助。