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

Posted 2023-05-08

【中文标题】从自动完成搜索中选择大数据大小属性

【英文标题】：select large data-size attribute from autocomplete search

【发布时间】：2019-05-13 19:03:15

【问题描述】：

我想从 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 的属性，以此类推。

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

【问题讨论】：

确认一下，您希望用户选择其中一个项目，然后让该项目显示特定的 DIV？

【参考方案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() 我可以显示所需的包。

希望对您有所帮助。