联想搜索

最新推荐文章于 2022-08-06 11:23:39 发布

Cym_summer

最新推荐文章于 2022-08-06 11:23:39 发布

阅读量492

点赞数

分类专栏： php 文章标签：联想搜索

php 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="php">首先创建一个文本框，写入事件

<meta charset="utf-8">
<title>联想搜索</title>
<!--
* 取消所有元素的内外边距
boty 相对定位
#a  绝对定位
-->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        position: relative;
        z-index: 0;
    }
    #a{
        position: absolute;
        z-index: 10000000;
        background-color: #FFF;
        font-size: 24px;
        line-height: 28px;
    }
    .p{
        background-color: #ccc;
    }
</style>
<body>
<input type="text" id="sou" size="40" style="height:36px"/>
<input type="button" value="搜索" id="bu">
<div id="a"></div>
<table id="b" border="1"></table>
<script src="jq.js"></script>
<script>


    //鼠标移上事件
    $(document).on("focus","#sou",function(){
        var val=$("#sou").val();
        if(val==""){
            $("#a").html("");
            return false;
        }
        $.post("jq.php",{val:val},function(msc){
            var str="";
            $.each(msc,function(a,b){
                str+="<p>"+ b.name+"</p>"
            })
            $("#a").html(str).css({
                'border':'1px solid black',
                'width':'256px'


            });
            //鼠标浮动事件
            $('p').hover(function(){
                $(this).addClass('p');
            },function(){
                $(this).removeClass('p');
            })
        })


    })




    //键盘抬起事件
    $(document).on("keyup","#sou",function(){
        var val=$("#sou").val();
        if(val==""){
            $("#a").html("");
            return false;
        }
        $.post("jq.php",{val:val},function(msc){
            var str="";
            $.each(msc,function(a,b){
                str+="<p>"+ b.name+"</p>"
            })
            $("#a").html(str).css({
                'border':'1px solid black',
                'width':'256px'


            });
            $('p').hover(function(){
                $(this).addClass('p');
            },function(){
                $(this).removeClass('p');
            })
        })


    })










//p标签点击事件
    $(document).on("click","p",function(){
        $("#a").html('').css('border','0px');
        var val=$(this).html();
        $("#sou").val(val);
    })




        //button按钮点击事件
    $(document).on("click","#bu", function (){
        $("#a").html('').css('border','0px');
        var val=$("#sou").val();
        $.post("table.php",{val:val},function(msc){
            var str="";
            $.each(msc,function(a,b){
                str+="<tr><td>"+ b.id+"</td><td>"+ b.name+"</td><td>"+ b.pwd+"</td></tr>"
            })
            $("#b").html(str);
        })
    })


</script>
</body>

// 触发键盘谈起事件，进入数据库查找数据

<?php
header("Content-type:text/html;charset=utf8");
$val=isset($_POST["val"])?$_POST["val"]:"";
$dsn = "mysql:host=127.0.0.1;dbname=test";
$db = new PDO($dsn, 'root', 'root',array(PDO::MYSQL_ATTR_INIT_COMMAND=>'set names utf8'));
$sql="select `name` from pdo where `name` like '$val%' limit 5";
$hehe=$db->query($sql);
$hehe->setFetchMode(PDO::FETCH_ASSOC);
$result_arr = $hehe->fetchAll();
header("Content-type:application/json");
$json=json_encode($result_arr);
echo $json;
?>

//点击按钮，进入数据库查找数据

<?php
header("Content-type:text/html;charset=utf8");
$val=isset($_POST["val"])?$_POST["val"]:"";
$dsn = "mysql:host=127.0.0.1;dbname=test";
$db = new PDO($dsn, 'root', 'root',array(PDO::MYSQL_ATTR_INIT_COMMAND=>'set names utf8'));
$sql="select * from pdo where `name` like '%$val%'";
$hehe=$db->query($sql);
$hehe->setFetchMode(PDO::FETCH_ASSOC);
$result_arr = $hehe->fetchAll();
header("Content-type:application/json");
$json=json_encode($result_arr);
echo $json;
?>