//js代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul{ list-style: none; } </style> </head> <body> <input type="text" id="t1" /> <ul id="ul"> </ul> </body> </html> <!-- 搜索下拉框 --> <script> let oT=document.getElementById("t1"); let oUl=document.getElementById("ul"); //oninput:改变文本框内容事件 oT.oninput=function(){ //Ajax 五部曲 let xhr=new XMLHttpRequest(); xhr.open("GET","search.php?text="+oT.value,true); xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ //回调函数 combobox(xhr.responseText); } } xhr.send(); } function combobox(str){ //将php文件返回的字符串转换为json let myJson=JSON.parse(str); //定义一个空字符串,用来放json里面的值 let ulhtml=""; //遍历json for(let a in myJson){ //把遍历出来的json值放入刚才定义的空字符串里,一定注意字符串拼接格式 ulhtml+="<li>"+myJson[a]+"</li>"; } oUl.innerHTML=ulhtml; } </script>//php代码
<?php header("Content-type:text/html;charset=utf-8"); $text =$_GET["text"]; if($text=="男人"){ echo '{"1":"男人很累","2":"男人很苦","3":"男人特别累"}'; } else if($text=="女人"){ echo '{"1":"女人是大猪蹄子","2":"女人是骗子","3":"女人是泡椒凤爪"}'; } ?>