您好,登錄后才能下訂單哦!
聯(lián)想搜索
1.聯(lián)想功能需要數(shù)據(jù)庫,
2.每字聯(lián)想還要ajax傳值,
但是那,在這里咱們不用ajax,因?yàn)閍jax的速度問題,所以我采用調(diào)用jquery.
效果展示:
代碼實(shí)現(xiàn):
調(diào)用時(shí)先引進(jìn)jquery才能實(shí)現(xiàn)
<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'); //鼠標(biāo)經(jīng)過元素的背景顏色改變 $("#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實(shí)現(xiàn)聯(lián)想搜索,你會(huì)嗎?的詳細(xì)內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。