Как выделить текст при наборе текста в html? - PullRequest
Новая
       39

Как выделить текст при наборе текста в html?

0 голосов
/ 10 мая 2018

У меня есть окно поиска, которое ищет имя проекта и идентификатор проекта, который фильтруется в боковой панели.

Я могу искать и фильтровать текст, введенный в поле поиска, но не могу выделить текст, который искал.

Вот код HTML, CSS и JavaScript, который я пробовалпока что:

html-код окна поиска 

      var filterInput, ul, li, a, i;

    filterInput = document.getElementById('filterInput');
    // Add event listener
    filterInput.addEventListener('keyup', filterNames);
     function filterNames(){
      // Get value of input
      let filterValue = document.getElementById('filterInput').value.toUpperCase();

     // Get names ul
      let ul = document.getElementById('projectlist');
 
     // Get lis from ul.
     let li = ul.querySelectorAll('li.nav-item');

     // Loop through collection-item list
      for(let i = 0;i < li.length;i++){
       let a = li[i].getElementsByTagName('a')[0];
       // If matched
       if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
        li[i].style.display = '';
        var text=a.innerHTML;
        text = text.replace( filterValue, '<span class="search-found">' + 
     filterValue + '</span>' );
        a.innerHTML=text;
        
      } else {
       li[i].style.display = 'none';
      
      }
     }
     }
  .sidebar .nav-link .highlight {

    background-color: #7b9d6f;
 
    }
  <input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

Here is the project list html code:

      <div id="projectlist" class="sidebar-sticky" >
    <ul class="nav flex-column nav-pills">
     
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 1
          <div>
            <small>
            ProjectId: 1
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 2
          <div>
            <small>
            ProjectId: 2
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 3
          <div>
            <small>
            ProjectId: 3
          </small>
          </div>
        </a>
        </li>
        
      </ul>
    </div>

Пожалуйста, помогите мне Hightlight код

Ответы [ 4 ]

0 голосов
/ 11 мая 2018

Здесь вы можете найти рабочий пример https://codepen.io/silabhijit/pen/bMvXgm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height, viewport-fit=cover">
    <title>Highlight Text while typeing in input box</title>
    <style>
        body {
            font-family: verdana;
        }

        .page-content {
            width: 100%;
            max-width: 990px;
            margin: 0 auto;
        }

        input {
            padding: 10px;
            width: 350px;
            border-radius: 5px;
            border: 1px solid #aaa;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 15px 0 0 0;
        }
        ul li {
            border: 1px solid #aaa;
            padding: 10px;
            border-bottom: 0;
        }

        ul li:last-child {
            border-bottom: 1px solid #aaa;;
        }

        ul li strong {
            color: #ff0000;
        }
    </style>
</head>
    <body>
        <header class="page-header">
        </header>
        <main class="page-content">
            <div class="input-holder">
                <input type="text" class="model" />
            </div>
            <ul>
                <li>Abhijit Sil</li>
                <li>Abhishek Roy</li>
                <li>Abhi Sen</li>
                <li>Ranjit Sharma</li>
                <li>Ravi Kar</li>
                <li>Surojit Shil</li>
                <li>Arunayan Shil</li>
            </ul>
        </main>
        <footer class="page-footer">
        </footer>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.model').on('keyup', function() {
                    var val = $(this).val();

                    var listItems = $('ul li');
                    listItems.each(function() {
                        var itemVal = $(this).text();

//                        remove strong tag from original string
                        itemVal = itemVal.replace('<strong>', '');
                        itemVal = itemVal.replace('</strong>', '');

                        if(itemVal.indexOf(val) !== -1) {
                            var convertedString = "<strong>" + val + "</strong>"
                            var output = itemVal.replace(val, convertedString);
                            $(this).html(output);
                        } else {
                            $(this).html(itemVal);
                        }

                    })
                })
            });

        </script>
    </body>
</html>
0 голосов
/ 10 мая 2018

КАК я вижу в вашем коде, что вы добавляете span с class="search-found" НО вы ухудшаете свой класс CSS * .highlight ЭТОГО НЕ СУЩЕСТВУЕТ
изменить свой CSS: 

.search-found {

    background-color: red;

    }


  var filterInput, ul, li, a, i;

    filterInput = document.getElementById('filterInput');
    // Add event listener
    filterInput.addEventListener('keyup', filterNames);
     function filterNames(){
      // Get value of input
      let filterValue = document.getElementById('filterInput').value.toUpperCase();

     // Get names ul
      let ul = document.getElementById('projectlist');
 
     // Get lis from ul.
     let li = ul.querySelectorAll('li.nav-item');

     // Loop through collection-item list
      for(let i = 0;i < li.length;i++){
       let a = li[i].getElementsByTagName('a')[0];
       // If matched
       if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
        li[i].style.display = '';
        var text=a.innerHTML;
        text = text.replace( filterValue, '<span class="search-found">' + 
     filterValue + '</span>' );
        a.innerHTML=text;
        
      } else {
       li[i].style.display = 'none';
      
      }
     }
     }
.search-found {

    background-color: red;
 
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">



      <div id="projectlist" class="sidebar-sticky" >
    <ul class="nav flex-column nav-pills">
     
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" >
          Project 1
          <div>
            <small>
            ProjectId: 1
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" >
          Project 2
          <div>
            <small>
            ProjectId: 2
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%">
          Project 3
          <div>
            <small>
            ProjectId: 3
          </small>
          </div>
        </a>
        </li>
        
      </ul>
    </div>
0 голосов
/ 10 мая 2018

Я использовал hilitor для подобного проекта, и это было прекрасно. Простая и открытая сборка с чистым JavaScript.

Вот ваш пример .. Я немного изменил вашу структуру: 

// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);

function filterNames() {
    // Get value of input
    let filterValue = document.getElementById('filterInput').value.toUpperCase();

    // Get names ul
    let ul = document.getElementById('projectlist');
    // Get lis from ul
    let li = ul.querySelectorAll('li.nav-item');

    // Loop through collection-item lis
    for(let i = 0;i < li.length;i++) {
      	let a = li[i].getElementsByTagName('p')[0];

        // If matched
        if(a.textContent.toUpperCase().indexOf(filterValue) > -1) {
        	li[i].style.display = '';
        } else {
        	li[i].style.display = 'none';
        }
    }
}

// Call Hilitor
var myHilitor2;
document.addEventListener("DOMContentLoaded", function(e) {
	// Set the parent
	myHilitor2 = new Hilitor("nav-item");
	// Text direction
	myHilitor2.setMatchType("left");
}, false);

// Event
document.getElementById("filterInput").addEventListener("keyup", function(e) {
	myHilitor2.apply(this.value);
}, false);
<script src="https://rawgit.com/GerHobbelt/hilitor/master/hilitor.js"></script>

<div id="projectlist" class="sidebar-sticky" >

 <input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

	<ul class="nav flex-column nav-pills">
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 1</p>
			</a>
		</li>
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 2</p>
			</a>
		</li>
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 3</p>
			</a>
		</li>
	</ul>
</div>

Вот исходный код , и вы можете узнать больше о его параметрах в документации 1016 *

0 голосов
/ 10 мая 2018

Пожалуйста, добавьте класс в этом теге и добавьте CSS для этого как 

if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
        li[i].style.display = '';
        var text=a.textContent;
        text = text.replace( filterValue, '<span class="search-found">' + 
     filterValue + '</span>' );
        a.textContent=text;
         a.classList.add('bold-class');
      } else {
       li[i].style.display = 'none';

      }

И в стиле 

.bold-class{
 font-weight:bold
}
...