php实现联想搜索,你会吗?

php实现联想搜索,你会吗?,第1张

概述php实现联想搜索,你会吗? PHP怎么实现联想搜索?

联想搜索

1.联想功能需要数据库,

2.每字联想还要AJAX传值,

但是那,在这里咱们不用AJAX,因为AJAX的速度问题,所以我采用调用jquery.

效果展示:

代码实现:

调用时先引进jquery才能实现

<Meta charset="utf-8"><input type="text"  value="" ID="wd"><div style='background: #e1e1e1;wIDth:220px;display:none;' ID="rs">    <ul>     </ul></div><script src="jq.Js"></script><script>    $(function(){        $("#wd").keyup(function(){            var word=$(this).val();            $.AJAX({                url:'http://suggestion.baIDu.com/su?wd='+word+'&cb=showli',                dataType:'Jsonp',                JsonpCallback:'showli',                success:function(txt){                    var arr=txt.s;                    var li="";                    $.each(arr,function(i,val){                        li+="<li>"+val+"</li> ";                    });                    $("#rs ul").HTML(li);                    $("#rs").slIDeDown('fast');                    //鼠标经过元素的背景颜色改变                    $("#rs ul li").bind('mouseenter',function(){$(this).CSS({'background':'yellow'})});                    $("#rs ul li").bind('mouseleave',function(){$(this).CSS({'background':'#e1e1e1'})});                    $("#rs ul li").bind('click',function(){                        $("#wd").val($(this).HTML());                        $("#rs").slIDeUp('fast');                    });            }})    })    })</script>
总结

以上是编程之家为你收集整理的php实现联想搜索,你会吗?全部内容,希望文章能够帮你解决php实现联想搜索,你会吗?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/langs/997602.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存