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>
转载于:https://www.cnblogs.com/LHH1314/p/7512600.html
AJAX,PHP，前端简单交互制作输入框效果相关推荐
- java制作霓虹灯_Vegas教你用超简单方法制作霓虹灯效果
在各色各样的展会中,各种炫彩华丽的灯光和光影一直都能吸引到人们大量的关注.同样,在视频制作中,光线的气氛渲染也是常用的方法,常用也就代表着效果明显,也是很多刚学视频剪辑小伙伴们想要学习的一种方法. 今 ...
- html option ajax,Ajax实现简单下拉选项效果【推荐】
基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: 请选择 请选择 2.Javascript中进行创建选项和执行AJAX异步请求步骤如下 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
- 怎样使用PS制作木刻效果图片？添加木刻特效原来这么简单！
使用PS可以制作出各种各样效果的图片,今天小编教大家一种如何在PS上制作木刻特效图片,学会之后,我们又可以离PS大神进一步了. 第一步:先打开我们电脑上的PS,然后使用快捷方式[Ctrl+O]将我们需 ...
- php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
- 课程设计-商店管理系统（一）----前端页面的制作（一）
前端页面的制作 因为前一段时间学习了数据库,学校老师要求制作一个有关数据库的管理系统,我看了一下要求的题目,其中最合适的就是商店管理系统(就是各大培训机构必做的电商系统).这篇博客是为了记录我的前 ...
- ajax 滚动加载 缓存,Ajax实现加载缓存的loding效果
这次给大家带来Ajax实现加载缓存的loding效果,Ajax实现加载缓存loding效果的注意事项有哪些,下面就是实战案例,一起来看一下. Ajax 异步请求的时候,一般都会利用一个动态的 gif小 ...
最新文章
- 【组队学习】【30期】李宏毅机器学习（含深度学习）
- Intent以及IntentFilter详解
- Maven系列三Maven内置变量
- 不是python对文件的读操作方法的是-一文读懂Python对文件的各种操作方式-阿里云开发者社区...
- DOM中的onbeforeunload函数
- Java中的引用与C中的指针
- 实现MySQL远程连接
- hdfs安全模式退出_浅谈HDFS（二）之NameNode与SecondaryNameNode
- 怎么把cad做的图分享给别人_在线协同文档分享后，别人只能看却不能写怎么办？...
- 博为峰JavaEE技术文章 ——MyBatis 简介（2）
- SAM4E单片机之旅——4、LED闪烁之PWM
- 两台文件服务器共享文件同步,如何实现两台或多台电脑远程修改文件同步更新？...
- 微软原版win10系统启动盘的使用
- 使用GDI绘制一个类似进度条的控件（1）
- 武大计算机本科毕业论文,武汉大学本科生毕业（论文）.docx
- Espresso Idling Resource
- lipo otool 动态库、静态库的生成
- 用Python分析《权力的游戏》
- 计数器——Verilog HDL语言
- js时间与当前时间比较