突出显示搜索关键字

发布于 2025-01-14 16:15:47 字数 1052 浏览 0 评论 0原文

我创建了一个简单的数据库,并且有一个实时搜索,我想知道如何突出显示表中的搜索关键字。我已经使用了其他方法,但仍然不起作用。请帮助我,

这是我的代码:

$(document).ready(function(){
    load_data();

    function load_data(search){
      $.ajax({
        url:"get_data.php",
        method:"POST",
        data: {
          search: search
        },
        success:function(data){
          $('#hasil').html(data);
        }
      });
    }
    $('#search').keyup(function(){
      var search = $("#search").val();
      load_data(search);
    });


    function highlight_word(hasil)
      {
          var text = document.getElementById("search").value;
          if(text)
          {
              var pattern=new RegExp("("+text+")", "gi");
              var new_text=hasil.replace(pattern, "<span class='highlight'>"+text+"</span>");
              document.getElementById("hasil").innerHTML=new_text; 
          }
      }

html:

  <input type="text" class="form-control" id="search" name="search" >
  <div id="hasil"></div>

I created a simple database and there is a live search,i want to know how to highlighting search keywords in the table. I've been using other means but still it doesn't work. please help me

this is my code :

$(document).ready(function(){
    load_data();

    function load_data(search){
      $.ajax({
        url:"get_data.php",
        method:"POST",
        data: {
          search: search
        },
        success:function(data){
          $('#hasil').html(data);
        }
      });
    }
    $('#search').keyup(function(){
      var search = $("#search").val();
      load_data(search);
    });


    function highlight_word(hasil)
      {
          var text = document.getElementById("search").value;
          if(text)
          {
              var pattern=new RegExp("("+text+")", "gi");
              var new_text=hasil.replace(pattern, "<span class='highlight'>"+text+"</span>");
              document.getElementById("hasil").innerHTML=new_text; 
          }
      }

html :

  <input type="text" class="form-control" id="search" name="search" >
  <div id="hasil"></div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无人问我粥可暖 2025-01-21 16:15:47

您从未在某处调用过highlight_word() 函数。
您可以通过以下方式替换您的成功功能:

success:function(data){
      $('#hasil').html(data);
      highlight_word(data);
    }

You've never called highlight_word() function somewhere.
you may replace your success function via:

success:function(data){
      $('#hasil').html(data);
      highlight_word(data);
    }
你爱我像她 2025-01-21 16:15:47

关注这篇文章。你可以这样

[https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript][1]

Follow This Article. You could this way

[https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript][1]

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文