AJAX,PHP,前端简单交互制作输入框效果

时间:2023-01-10 10:16:06

PHP数据

<?php
  // 数据
  $arr = array(
  array("百度", "http://www.baidu.com/"),
  array("网易", "http://www.163.com/"),
  array("网易新闻", "http://news.163.com/"),    

);
  $l = count($arr);
  // 接收
  $w = $_GET["w"];
  // 循环
  $str = "";
  for( $i=0; $i<$l; $i++){
  if(strpos($arr[$i][0], $w) !== false){
  $str .= "|".$arr[$i][0].",".$arr[$i][1];
      }
}

echo $str;
?>

AJAX.js封装

function get(url, fn){
var xhr;
if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.open("get", url, true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
if( fn ){
fn(xhr.responseText);
}
}
}
}

function post(url, data, fn){
var xhr;
if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.open("post", url, true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
if( fn ){
fn(xhr.responseText);
}
}
}
}

html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#text1{
border: 1px solid gray;
width: 300px;
height: 30px;
}
#div1{
border: 1px solid gray;
background: lightyellow;
width: 302px;
display: none;
}
/*#div1 *{
margin: 0;
padding: 0;
list-style: none;
}*/
</style>
</head>
<body>

<input type="text" id="text1" />
<div id="div1"><ul id="ul1"></ul></div>

</body>
</html>
<script src="ajax.js"></script>
<script>

var ul1 = document.getElementById("ul1");//提示框ul
var ind = 0; // li的下标,每一个li,指输入框的内容所匹配出的结果

text1.onkeyup = function(e){ // 输入框键子按下抬起后,触发的函数
e = e || window.event; // event事件
var code = e.which || e.keyCode; // 指按下了哪个键子
var lis = ul1.getElementsByTagName("li"); // 指当前输入框的内容所对应的所有的li
var len = lis.length; // li的数量
var i = 0; // 循环时的初始值
switch( code ){ // 判断按下了哪个键子
case 13: // 如果按下的是回车
text1.value = lis[ind].innerText; // 将根据下标找到的li的内容,显示在输入框中
break; // 跳出
case 38: // 如果按下了键盘上的方向键上()
ind--; // 下标减1
if(ind==-1)ind=len-1; // 如果下标已经越过了最小值,让下标等于最大值
for( i=0; i<len; i++){ // 循环,将所有的li的背景色清空
lis[i].style.background="";
}
lis[ind].style.background="greenyellow"; // 将当前下标所对应的li的背景色高亮
break;
case 40:
ind++; // 下标加1
if(ind==len)ind=0; // 如果下标已经越过了最大值,让下标等于最小值
for( i=0; i<len; i++){ // 循环,将所有的li的背景色清空
lis[i].style.background="";
}
lis[ind].style.background="greenyellow"; // 将当前下标所对应的li的背景色高亮
break;
default: // 键盘按下了其他的键子时
var w = text1.value; // 获取输入框的值
if( w != "" ){ // 如果输入框中有值
get("chk.php?w="+w, function(str){ // 发起ajax请求,把输入框的指传给php页面
div1.style.display = "block"; // div显示
ul1.innerHTML = ""; // ul节点清空
var arr = str.split("|"); // 响应内容(响应内容指,根据输入框的值,所得到的相关数据),转换为数组,如果不转换输出arr is not defined;

for( var i=1,l=arr.length; i<l; i++ ){ // 对数组进行循环
var li = document.createElement("li"); // 创建li节点
ul1.appendChild(li); // 节点添加到ul中
var col = arr[i].split(","); //每一项包含多个属性,所以也许转为数组
// 显示在li中,replace为高亮显示关键字,eval指转为正则对象
li.innerHTML = col[0].replace(eval("/"+w+"/g"), "<font color=red>"+w+"</font>");
li.onclick = function(){ // 每一个li绑定点击事件
text1.value = this.innerText; // 将当前被点击的li的文本,显示在输入框中
div1.style.display = "none"; // div隐藏
      }
}
if(l>1){ // 如果根据输入框的值,能过获取数据,则将第一项选中
ul1.getElementsByTagName("li")[ind].style.background="greenyellow";
  }
});
}else{
ul1.innerHTML = ""; //内容清空
div1.style.display = "none";//div隐藏
     }
   }

}

</script>