自动补全

思路：每次文本框输入的时候都去发送ajax请求，得到相关的数据，然后再把这些数据添加到页面中，就可以实现自动补全的效果
html结构代码：

<input type="text" name="txt" id="txt" />
<ul id="list"></ul>

同样在写js代码之前先引入ajax文件或自己封装一个ajax都可以
ajax封装代码我放到最下面了，需要的可以拿来用
js实现代码：

var oTxt = document.getElementById("txt");
			var oList = document.getElementById("list");
			//给文本框注册输入事件
			oTxt.oninput = function(){
				ajax({
					type:"post",
					url:"index.php",
				data:{"kw":oTxt.value},
					success:function(data){
					//将得到的结果转成json格式的数据
						data = JSON.parse(data);
						var str = "";
	
	//将得到的 数据加到页面中					
	for(var i = 0; i < data.length; i++){
							str += `<li>${data[i]}</li>`;
						}
						oList.innerHTML = str;
					}
				})
			}

index.php的代码

<?php
$kw = $_POST["kw"];   //接收前台传来的数据
$arr = ["a","aa","aba","aaaa","aaaaaaaaa"];
$newArr = [];
//从数组查找是否有相关数据
foreach($arr as $val){
	
	if($kw == substr($val,0,strlen($kw))){
		array_push($newArr,$val);
	}
	
}
//将数据进行json编码
$json = json_encode($newArr);

echo $json;

?>

ajax的代码

function ajax(obj){
	//obj -> type url data success
	var str = "";
	for(var key in obj.data){
		str += key+"="+obj.data[key]+"&";
	}
	//str = str.substring(0,str.length-1);
	str = str.replace(/&$/,"");
	
	if(window.XMLHttpRequest){
		var xhr = new XMLHttpRequest();
	}else{
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	if(obj.type.toUpperCase()=="GET"){
		if(obj.data){
			var url = obj.url + "?" + str;
		}else{
			var url = obj.url;
		}
		
		xhr.open("get",url,true);
		xhr.send();
	}
	if(obj.type.toUpperCase()=="POST"){
		xhr.open("post",obj.url,true);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(str);
	}
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var data = xhr.responseText;
				obj.success(data);
			}
		}
	}
}