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

Метод 1: предварительно загруженный массив изображений.
Этот метод предполагает предварительную загрузку изображений в массив и их отображение на основе ввода пользователя.

<input type="text" id="imageInput" />
<div id="imageContainer"></div>
<script>
  var images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
    // Add more image URLs as needed
  ];
  $('#imageInput').on('input', function() {
    var userInput = $(this).val().toLowerCase();
    $('#imageContainer').empty();
    images.forEach(function(image) {
      if (image.toLowerCase().includes(userInput)) {
        $('#imageContainer').append('<img src="' + image + '" />');
      }
    });
  });
</script>

Метод 2: вызов AJAX
Этот метод включает вызов AJAX для динамического получения изображений на основе ввода пользователя.

<input type="text" id="imageInput" />
<div id="imageContainer"></div>
<script>
  $('#imageInput').on('input', function() {
    var userInput = $(this).val().toLowerCase();
    $('#imageContainer').empty();
    $.ajax({
      url: 'getImages.php',
      method: 'GET',
      data: { userInput: userInput },
      success: function(response) {
        response.forEach(function(image) {
          $('#imageContainer').append('<img src="' + image + '" />');
        });
      }
    });
  });
</script>

Метод 3. Манипулирование классами CSS.
Этот метод предполагает использование классов CSS для отображения или скрытия изображений на основе ввода пользователя.

<input type="text" id="imageInput" />
<div class="image hidden">image1.jpg</div>
<div class="image hidden">image2.jpg</div>
<div class="image hidden">image3.jpg</div>
<!-- Add more image divs as needed -->
<script>
  $('#imageInput').on('input', function() {
    var userInput = $(this).val().toLowerCase();
    $('.image').each(function() {
      var image = $(this).text().toLowerCase();
      if (image.includes(userInput)) {
        $(this).removeClass('hidden');
      } else {
        $(this).addClass('hidden');
      }
    });
  });
</script>

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