PHP实现搜索关键词描红效果

水深无声 2022-12-03 13:08 170阅读 0赞

> 参考网上的博客，实现简单的搜索结果关键词描红效果。

建库建表sql：

DROP DATABASE IF EXISTS `book`;
    CREATE DATABASE IF NOT EXISTS `book` DEFAULT CHARSET = `utf8`;
    USE `book`;
    
    
    SET FOREIGN_KEY_CHECKS = 0;
    
    -- ----------------------------
    -- Table structure for tb_book
    -- ----------------------------
    DROP TABLE IF EXISTS `tb_book`;
    CREATE TABLE `tb_book`  (
      `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '主键id',
      `name` varchar(255) NOT NULL COMMENT '书名',
      `description` varchar(255) DEFAULT NULL COMMENT '简介',
      PRIMARY KEY (`id`)
    ) ENGINE = InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
    
    -- ----------------------------
    -- Records of tb_book
    -- ----------------------------
    INSERT INTO `tb_book` VALUES (1, 'Linux从入门到超神', 'Linux学习宝典');
    INSERT INTO `tb_book` VALUES (2, 'PHP从菜鸟变高手', 'PHP零基础教学');
    INSERT INTO `tb_book` VALUES (3, 'Java从自闭到入坟', 'Java程序员的自我修养');
    INSERT INTO `tb_book` VALUES (4, 'C核心思想', '了解C语言编程的核心思想');
    INSERT INTO `tb_book` VALUES (5, 'Python之禅', '从入世到出世');

test.php：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>PHP实现关键词描红效果</title>
      <link rel="stylesheet" href="">
    </head>
    <body>
    <form action="#" method="post">
      <input type="search" placeholder="请输入关键词" name="keyword">
      <input type="submit" value="提交" />
    </form>
    <?php
      if(!empty($_POST['keyword'])){ 
        $keyword = $_POST['keyword'];//获取输入的关键字
        //进行数据库连接
        $conn = mysqli_connect("localhost","root","123456");
        if(!$conn){ 
          die("数据库连接失败！");
        }
        $flag = mysqli_select_db($conn,"book");
        if(!$flag){ 
          die("数据库打开失败！");
        }
        $sql = "select * from tb_book where name like '%$keyword%' or description like '%$keyword%'";
        $result = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_assoc($result)){ 
    ?>
    <div style="width:300px;height:100px;background-color: #ccc;margin-bottom: 10px">
        
      <p>书名：<?php echo str_ireplace($keyword, "<span style=\"color: #f00; \">$keyword</span>",$row['name'])?></p>
      <p>简介：<?php echo str_ireplace($keyword, "<span style=\"color: #f00; \">$keyword</span>",$row['description'])?></p>
    </div>
    <?php
      }
    }else{ 
      echo "暂未匹配到相关书籍！";
    }
    ?>
    </body>
    </html>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3VzZXJuYW1lNjY2_size_16_color_FFFFFF_t_70_pic_center]

**参考文章链接：**

*  [https://www.jb51.net/article/164508.htm][https_www.jb51.net_article_164508.htm]
 *  [https://blog.csdn.net/baochao95/article/details/51884663][https_blog.csdn.net_baochao95_article_details_51884663]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3VzZXJuYW1lNjY2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4820b144832948369b743b1d71f03129.png
[https_www.jb51.net_article_164508.htm]: https://www.jb51.net/article/164508.htm
[https_blog.csdn.net_baochao95_article_details_51884663]: https://blog.csdn.net/baochao95/article/details/51884663