AJAX,PHP，前端简单交互制作输入框效果
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>
AJAX,PHP，前端简单交互制作输入框效果的更多相关文章
- 12个来自 Codrops 的创新交互和动画效果
产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...
- 常用的移动前端webapp交互细节
#常用的移动前端webapp交互细节 ##select的表现方式 ###PC端 select控件在传统PC桌面已经存在多年,由于在IE6等低版本浏览器容易造成层级错乱,一直被一些UI框架所抛弃,而用d ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- unity3d和php后台简单交互--二
上次我们讨论了u3d和php的简单交互,现在我们接着讨论u3d和php交互,这里我们讨论的是php的后台大家可以延伸为其他语言.在实现的开发中我们很少通过发送字符或者字段到服务器上的,我们一般会请求包 ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- 利用原生js的Dom操作实现简单的ToDoList的效果
效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
随机推荐
- 使用Pano2VR 切割图片
图片转换好之后得到一组立方体面片.
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 【个人笔记】《知了堂》前端mySql基础
指定列之后添加: ALTER TABLE 表名 ADD 添加的新列名 INT AFTER 指定列之后 第一个位置: ALTER TABLE 表名 ADD 添加的新列名 varchar(20) AFTE ...
- 协议端口号（protocol port number）
协议端口号(protocol port number) 先来个注意事项 (-> ->) 这种在协议层间的抽象的协议端口是软件端口,和硬件端口是完全不同的概念.硬件端口是不同设备进行交互的接 ...
- 一个完整的Node.js RESTful API
前言 这篇文章算是对Building APIs with Node.js这本书的一个总结.用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求.正因为它用js写的,跟i ...
- 【转】String字符串相加的问题
String字符串相加的问题 前几天同事跟我说我之前写的代码中在操作字符串时候,使用字符串相加的方式而不是使用StringBuffer或者StringBuilder导致内存开销很大.这个问题一直在困扰 ...
- B树、B+树、B*树
二叉搜索树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如 ...
- 【Windows 10 应用开发】细说文本资源文件（resw）
最近,小戏骨版<红楼梦>很是火热,老周一口气看完了9集,一直看到 Surface 的风扇呼呼响.林黛玉和薛宝钗这两个角色都演得不怎么样,倒是演史湘云的娃娃演得不错,老周甚是喜欢. 于是,昨 ...
- webpack2使用ch6-babel使用 处理es6 优化编译速度
1 目录结构 安装依赖 cnpm install --save-dev babel-loader babel-core babel-preset-env babel-preset-latest &qu ...
- GRE 协议简介
1. 协议简介 gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络 ...