Поиск текста на jquery

Question

У меня есть сайт с карточками товаров. У товаров есть названия. Мне нужно, когда пользователь вводит в input название определённого товара скролить страницу до этого товара. Как я могу это сделать? Подскажите, пожалуйста.

Мой jquery.

// скролл до определённого продукта (это не работает)
$(function () {
  $(".text_2_Rapid_Item_1").on("input", function () {
    $(".Rapid_Item_1").get(0).scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  });
});

Класс .text_2_Rapid_Item_1 - название товара.

Класс .Rapid_Item_1 - карточка товара.

Id #current_input - мой input.

Также пытался так и не получилось.

// скролл до определённого продукта (это не работает)
$(".text_2_Rapid_Item_1").on("input", function () {
  if ($(document).find("#current_input" + $(this).val()).length > 0) {
    $(".Rapid_Item_1").get(0).scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }
});

// скролл до определённого продукта (это не работает)
$(".text_2_Rapid_Item_1").on("input", function () {
  console.log("value = ", this.value);
  $(".Rapid_Item_1")[0].scrollIntoView({
    block: "start",
    behavior: "smooth",
  });
});

Буду признателен за любую помощь.

Answer 1

Поскольку второй пример без контекста совсем не понятен, да и выглядит бредовенько, то давайте поговорим о вашем первом примере.

Вопрос: "вы консолью браузера при отладке пользуетесь?". console.log(ваша_переменная) для кого по-вашему придумана?.
Пишем для начала минимум:

$(".text_2_Rapid_Item_1").on("input", function() {
  console.log( 'value = ',this.value )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text_2_Rapid_Item_1">

Идём дальше? Вытащим наружу этот кусок. УжОс!

$(".Rapid_Item_1").get(0).scrollIntoView({
  block: "start",
  behavior: "smooth",
});

Что это вообще такое вы понимаете? Посмотрите хотя бы на что такое get() на самом деле. Но лучше объясню на правильном примере:

$(".Rapid_Item_1")[0].scrollIntoView({
  block: "start",
  behavior: "smooth",
});

jQuery сделает выборку всех элементов с классом .Rapid_Item_1 и доскролит страницу до первого найденного — [0].

И где здесь (в вашем коде) вы вообще что-то делаете? Вводимый текст не ищите и хуже того, даже не используете, так чего вы вообще пытаетесь добиться?

Надеюсь помог вводной информацией.

Answer 2

$('input').on('input',function(){
  let input_text = $(this).val().trim().toLowerCase();
  $('.card').each(function(){
    let card_text = $(this).find('.description').text().trim().toLowerCase();
    if (card_text !== '' && input_text === card_text) { 
    //или можно использовать строковый метод includes -> card_text.includes(input_text)
      this.scrollIntoView({block: "center", behavior: "smooth"});
    }
  })
})

input {
 padding: 5px;
 margin-bottom: 20px;
 border-radius: 5px;
 border: 1px solid grey;
}

.wrapper {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 70px;
  height: 100px;
  border: 1px solid grey;
  border-radius: 5px;  
  display: grid;
  place-items: center;
  font-size: 0.8em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' placeholder="search">
<div class='wrapper'>
  <div class='card'> <p class='description'>Первый</p></div>
  <div class='card'></div>
  <div class='card'> <p class='description'>Третий</p></div>
  <div class='card'> </div>
  <div class='card'> <p class='description'> Пятый</p> </div>
  <div class='card'> </div>
  <div class='card'> </div>
  <div class='card'> <p class='description'> Восьмой</p></div>
  <div class='card'> </div>
  <div class='card'> </div>
  <div class='card'> </div>
  <div class='card'> </div>
  <div class='card'> </div>
  <div class='card'> <p class='description'>Четырнадцатый</p></div>
  <div class='card'> </div>
</div>

БЛОГ НА HUSL

Поиск текста на jquery

Ответы (2 шт):