Вопросы Теги

Выделите текст в поиске ввода JQuery

f = open ('C: \\ Users \\ Pooja \\ Desktop \\ trolldata.csv') ... Используйте '\\' для программы python в версии python версии 3 и выше .. Ошибка будет разрешена. .

1
задан Adam Sam 4 March 2019 в 13:56
поделиться

1 ответ

Я только модифицировал функцию var $search = $("#search").on('input',function(){, но вот решение.

У вас будет <span> на каждом <div>, который будет перемещаться по тексту, который вы ищете. 

$(document).ready(function(){
    var $btns = $('.btn').click(function() {
        if (this.id == 'all') {
          $('#parent > div').fadeIn(450);
        } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > div').not($el).hide();
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
          return matcher.test($(this).find('.h5text').text())
        }).hide();
        $('.box').each(function()
        {
    	  var html = $(this).find('.h5text').text();
          var text = $("#search").val();
          var index = html.toLowerCase().indexOf(text.toLowerCase());
          if (index >= 0) { 
            html = html.substring(0,index) + "<span style='background-color: yellow;'>" +html.substring(index,index+text.length) + "</span>" + html.substring(index + text.length);
            $(this).find('.h5text').html(html);
          }
        })
     })
    
        var $search = $("#owner").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
            return matcher.test($(this).find('.card-subtitle').text())
        }).hide();
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="css/simple-sidebar.css" type="text/css" rel="stylesheet">
</head>

<body>
<input type="text" id="search" class="form-control" placeholder="Search...">
<div class="parent m-3">
<div class="box">
    <h5 class="h5text">Teemo</h5>
</div>
<div class="box">
    <h5 class="h5text">Leona</h5>
</div>
<div class="box">
    <h5 class="h5text">Jax</h5>
</div>
<div class="box">
    <h5 class="h5text">Lucian</h5>
</div>
<div class="box">
    <h5 class="h5text">Jinx</h5>
</div>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="filter.js"></script>
</body>

</html>

0
ответ дан Romain B. 4 March 2019 в 13:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: