php制作搜索框_jquery+php实现搜索框自动提示

jquery+php实现搜索框自动提示

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

#search{font-size:14px;}

#search .k{padding:2px 1px; width:320px;}

#search_auto{border:1px solid #817FB2; position:absolute; display:none;}

#search_auto li{background:#FFF; text-align:left;}

#search_auto li.cls{text-align:right;}

#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;}

#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;}

jquery+php实现用户输入搜索内容时自动提示

$(function(){

$('#search_auto').css({'width':$('#search input[name="k"]').width()+4});

$('#search input[name="k"]').keyup(function(){

$.post('search_auto.php',{'value':$(this).val()},function(data){

if(data=='0') $('#search_auto').html('').css('display','none');

else $('#search_auto').html(data).css('display','block');

});

});

});

服务器端完整php代码：

?

1

2

3

4

5

6

7

8

9

$v=$_POST[value];

$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");

if(mysql_num_rows($re)<=0) exit('0');

echo '

• ';

while($ro=mysql_fetch_array($re)) echo '

'.$ro[title].'';

echo '

关闭';

echo '

';

?>

非常实用的功能吧，而且对提升用户的体验度、友好度非常棒，小伙伴们可以结合本文，自由发挥下，加入到自己的项目中去.

【jquery+php实现搜索框自动提示】相关文章：