文章目录

搜索框输入内容无刷新提示搜索结果(ajax+php)

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

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

html页面

html代码<style>
.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;}
</style>
<div class="schbox">
	<input type="text" id="schtxt" class="schtxt" /><div class="schresult"></div>
</div>
<script>
$(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();
			}
		}
	});
});
</script>

ajax.php页面

php代码$schtxt=$_GET["schtxt"];
$fdata=file("a.txt");
$html='';
foreach ($fdata as $key=>$v){
	if (strrpos(' '.$v,$schtxt)){
		$html.='<p>'.str_replace($schtxt,'<span>'.$schtxt.'</span>',$v).'</p>';
	}
}
//上面为了演示是从一个记事本文档里读的数据,请根据自己需求改动。
$data=array("html"=>$html);
echo json_encode($data);

查看实例

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

本文网址:http://www.santii.com/article/224.html

数据更新时间:2019-11-23