zoukankan      html  css  js  c++  java
  • 关键字搜索后描红

    在刚开始学习php的时候,就对搜索过后的关键字描红感到好奇,但是这几天在巩固php基础的时候,就发现原来这样的效果实现并不难。按照惯例,首先给大家看看效果图吧。


    运行效果图

    这里写图片描述


    数据库相关

    数据库名是book,只有一个数据库表,也是book,模拟了5条数据。
    name字段是书名,description字段是书的描述

    这里写图片描述


    代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
    <body>
    <form action="14.php" method="post">
        请输入关键字:<input type="text" name="keyword">
        <input type="submit" value="提交" />
    </form>
    <?php
        if(!empty($_POST['keyword'])){
            $keyword = $_POST['keyword'];//获取输入的关键字
            //进行数据库连接
            $conn = mysql_connect("localhost","root","1234");
            if(!$conn){
                die("数据库连接失败");
            }
            $flag = mysql_select_db("book",$conn);
            if(!$flag){
                die("数据库打开失败");
            }
            mysql_query("set names utf8");
            $sql = "select * from book where name like '%$keyword%' or description like '%$keyword%'";
            $result = mysql_query($sql,$conn);
            while($row = mysql_fetch_assoc($result)){
    ?>
    
    <div style="300px;height:100px;background-color: #ccc;margin-bottom: 10px">
        <p>书名:<?php echo str_ireplace($keyword, "<font color='#f00'>$keyword</font>",$row['name'])?></p>
        <p>描述:<?php echo str_ireplace($keyword, "<font color='#f00'>$keyword</font>",$row['description'])?></p>
    </div>
    
    <?php 
        }
    }else{
        echo "很遗憾,没有找到书籍";
    }
    ?>              
    </body>         
    </html>

    最后说一下实现的原理,首先先获取从文本框输入的关键字文字,然后就是连接数据库进行查询,将书名中或者描述中包含关键字文字的记录查询出来,把查询到的结果循环显示出来,在显示书名和描述的时候,用str_ireplace()函数将其中的关键字文字替换成带有红色的文字,就实现了关键字描红的效果。

  • 相关阅读:
    ARM装配说明MCR/MRC学习
    smark和openfire即时通信代码
    Bulk Insert具体订单
    Redis测井系统
    几种任务调度的 Java 实现方法与比较
    Android中Style和Theme的使用
    高仿优酷Android客户端图片左右滑动(自动切换)
    Android GridView 一行显示数据(包括图片和文本),解决的办法是计算数据占该行的宽度是多少
    为Android GridView 设置行背景
    Android利用Filter过滤数据
  • 原文地址:https://www.cnblogs.com/cnsec/p/13407088.html
Copyright © 2011-2022 走看看