php输入框里的提示文字,搜索框输入内容无刷新提示搜索结果(ajax+php)

搜索框输入内容无刷新提示搜索结果(ajax+php)2019-08-09 10:55

在搜索框输入关键字的时候，无刷新实时显示相关结果出来。

使用jquery+ajax+php，代码如下。

html页面 html代码

.schbox{ position:relative;}

.schtxt{width:300px; height:26px; border-radius:3px; border:1px #ccc solid;}

.schresult{width:302px; display:none; border-radius:3px; border:1px #ccc solid; border-top:none; position:absolute; top:26px; left:0;}

.schresult span{color:red;}

$(document).on("keyup","#schtxt",function(){

var schtxt=encodeURI($.trim($(this).val()));

var url="ajax.php?schtxt="+schtxt;

$.ajax({

url:url,

type:"get",

dataType:"json",

success: function(data){

if(data.html.length>0){

$(".schresult").show().html(data.html);

}else{

$(".schresult").hide();

}

}

});

});

ajax.php页面 php代码$schtxt=$_GET["schtxt"];

$fdata=file("a.txt");

$html='';

foreach ($fdata as $key=>$v){

if (strrpos(' '.$v,$schtxt)){

$html.='

'.str_replace($schtxt,''.$schtxt.'',$v).'

';

}

}

//上面为了演示是从一个记事本文档里读的数据，请根据自己需求改动。

$data=array("html"=>$html);

echo json_encode($data);

ajax.php里面为了演示是从一个记事本文档里读的数据，请根据自己需求改动。