Поле ввода поиска для поиска данных JSON

ProgramBox

Поле ввода поиска для поиска данных JSON

Post author:admin
Запись опубликована:6 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть массив объектов, которые я генерирую на основе требований пользователя.

То, что я пытаюсь сделать, это:-

У меня есть массив объектов, которые я сохранил в переменной, и у меня есть поле ввода
поле ввода — это поиск типа, поэтому в моем массиве объектов ключами являются ItemName , BatchCode , CasesQty , UnitQty PurRate , 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);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="form-group">
  <input type="search" class="form-control" name="searchInput" id="searchInput">
</div>

<div id="filter-records"></div>

Я думаю, что я использую неправильный подход для отображения параметров поиска в новом div, изображение, которое я загрузил, я хочу сделать что-то подобное

1. У вас есть массив объектов, а не строка Json.

2. Как насчет автозаполнения пользовательского интерфейса jquery?

3. @Pradeep на самом деле я не хочу использовать какую-либо библиотеку, но если это можно сделать так, как я пытаюсь достичь, тогда никаких проблем

4. Это всего лишь идея, вы можете сделать что-то вроде использования выпадающего списка, сначала заполнить его пустым массивом, затем при изменении события указать setTimeout в 1 секунду, в это время заполнить массив именами элементов, которые соответствуют введенной строке, и присвоить ему выпадающий список

5. @DeepankarSingh Нет, это может быть очень сложно, я попробовал поле ввода с выпадающим списком, в раскрывающемся списке я заполнил все ItemName , а также предоставил поле поиска внутри выпадающего списка для поиска, но это противоречит требованиям пользователя, я хочу создать что-то вроде того, что я загрузил изображение

Ответ №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>

1. эй, нам не может понравиться то, что я набираю, соответствующий текст также должен находиться внутри текстового поля

2. не могу понять! какое текстовое поле? если вы ищете текстовое поле, то это невозможно, потому что текстовое поле может содержать только одно значение. на самом деле я не понимаю вашей реальной проблемы, я думаю.

3. предположим, я набираю, curd поэтому, когда я набираю cu, тогда curd должен заполняться внутри поля ввода, поскольку заполняется ближайшее совпадающее значение из выпадающего списка, как на моем изображении, которое я ввел, c самое близкое значение к c