Question

我有一个根据用户需求生成的对象数组。

我想做的是：-

我有一个对象数组，已存储在变量中并具有输入字段
输入字段是类型搜索，因此在我的对象数组中，键为ItemName，BatchCode，CasesQty，UnitQty，PurRate和{{ 1}}我将Disc%作为搜索参数
现在，当用户专注于输入字段时，我正在做的事情是我正在搜索ItemName的数据，但是由于某种原因，我无法创建我必须要做的事情
我想创建类似
每当用户在输入字段匹配项内输入内容时，也应将其输入框内
在我的代码中作为搜索参数出现的下拉列表不可点击

我的代码

ItemName

var data = [{
    "ItemName": "Curd",
    "BatchCode": 400231,
    "CasesQty": 10,
    "UnitQty": 5,
    "PurRate": 50,
    "Disc%": 6
  },
  {
    "ItemName": "Rice",
    "BatchCode": 400123,
    "CasesQty": 12,
    "UnitQty": 7,
    "PurRate": 80,
    "Disc%": 10
  },
  {
    "ItemName": "Milk",
    "BatchCode": 400156,
    "CasesQty": 4,
    "UnitQty": 2,
    "PurRate": 20,
    "Disc%": 2
  },
  {
    "ItemName": "Butter",
    "BatchCode": 400564,
    "CasesQty": 8,
    "UnitQty": 6,
    "PurRate": 35,
    "Disc%": 4
  }
]

$('#searchInput').keyup(function() {
  var searchField = $(this).val();
  if (searchField === '') {
    $('#filter-records').html('');
    return;
  }

  var regex = new RegExp(searchField, "i");
  var output = '<div class="row">';

  $.each(data, function(key, val) {
    if ((val.ItemName.search(regex) != -1)) {
      output += '<div">';
      output += '<div class="form-group"><a class="dropdown-item">' + val.ItemName + '</a></div>'

    }
  });
  output += '</div>';
  $('#filter-records').html(output);
});

我认为我使用错误的方法在新的div中显示搜索参数，我上传的图片我想做类似的事情

Answer 1

首先从给定对象创建项目名称列表，然后使用自动完成库。我正在使用jQuery库进行自动填充。

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script>
  $( function() {
    var data = [{
      "ItemName": "Curd",
      "BatchCode": 400231,
      "CasesQty": 10,
      "UnitQty": 5,
      "PurRate": 50,
      "Disc%": 6
    },
    {
      "ItemName": "Rice",
      "BatchCode": 400123,
      "CasesQty": 12,
      "UnitQty": 7,
      "PurRate": 80,
      "Disc%": 10
    },
    {
      "ItemName": "Milk",
      "BatchCode": 400156,
      "CasesQty": 4,
      "UnitQty": 2,
      "PurRate": 20,
      "Disc%": 2
    },
    {
      "ItemName": "Butter",
      "BatchCode": 400564,
      "CasesQty": 8,
      "UnitQty": 6,
      "PurRate": 35,
      "Disc%": 4
    }
  ]

    let itemName = data.map(value => { return value.ItemName });
    
    $( "#tags" ).autocomplete({
      source: itemName
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

搜索输入字段以搜索JSON数据

1 个答案: