JS类百度的动态提示框思路及完成
参考的代码来自这里:
http://www.jb51.net/article/28075.htm
不过说实话,这个网站太烂了,不适合看代码,另外写代码的人是个大牛,但是却没有模块化思想,所以朕不高兴直接用,索性是周末就花时间写一个吧。
明确一下需求:
需要一个输入框,在用户输入之后(keyup事件),将用户输入返回给外部,并从外部获取提示信息,显示到输入框下方
另外:
1、在失去焦点时,需要消去提示框
2、需要屏蔽浏览器原有的提示功能
3、监听键盘上下键,循环选择提示项
4、当窗口位置变化时,重新定位提示框
模块结构:
function AutoCompleteInput(Input,callBack){
this.Input = Input;
this.callBack = callBack;
}
/**
* 设置提示内容
* @param txt {String}提示内容,以","隔开
*/
AutoCompleteInput.prototype.setAutoText = function(obj,txt){ };
足够简单吧?哈,下面就看实现了,请期待吧,估计晚上能写完。
晚了点,不过有原因的,中间做了个ppt
/**
* Created by william on 2015/1/16.
*/ define(function(){
function AutoCompleteInput(Input, callBack) {
this.$Input = $(Input);//输入框对象
this.callBack = callBack;
this.$autocomplete; //提示框对象
this.Init();
this.selectedIndex = -1;
}
/**
* 设置提示内容
* @param txt {String}提示内容,以","隔开
*/
AutoCompleteInput.prototype.setAutoText = function (txt) {
var self = this;
if(txt.length==0||txt =="")
return;
var str = txt.split(',');
$.each(str,function(index,term){
$('<li style="list-style-type: none;cursor: default;"></li>').text(term).appendTo(self.$autocomplete)
.hover(function () {
//下拉列表每一项的事件,鼠标移进去的操作
$(this).siblings().css("background-color","white");
$(this).css("background-color","#9ACCFB");
self.selectedIndex = index;
}, function () {
//下拉列表每一项的事件,鼠标离开的操作
$(this).css("background-color","white");
//当鼠标离开时索引置-1,当作标记
self.selectedIndex = -1;
})
.click(function () {
//鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中
self.$Input.val(term);
//清空并隐藏下拉列表
self.$autocomplete.empty().hide();
});
});
this.$autocomplete.show();
}; AutoCompleteInput.prototype.Init = function () {
var self = this;
this.$Input.attr("autocomplete", "off");
var position = this.$Input.position();
var w = this.$Input.width()+2;
this.$autocomplete = $('<div style="position: absolute;left: '+position.left+'px;top:'+position.bottom+'px;width:' +w+'px;border: 1px solid #9ACCFB;background-color: white;text-align: left;"></div>')
.hide().insertAfter(this.$Input);
//设置键盘事件
this.$Input.keyup(function (event) {
//字母数字,退格,空格
if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
//首先删除下拉列表中的信息
self.clear();
self.callBack(self,self.$Input.val());
return;
}
//方向键 上
if (event.keyCode == 38) {
//selectedIndex = -1 代表鼠标离开
if (self.selectedIndex == -1) {
self.setSelectedItem(self.$autocomplete.find('li').length - 1);
}
else {
//索引减1
self.setSelectedItem(self.selectedIndex - 1);
}
event.preventDefault();
return;
}
//方向键 下
if (event.keyCode == 40) {
//this.selectedIndex = -1 代表鼠标离开
if (self.selectedIndex == -1) {
self.setSelectedItem(0);
}
else {
//索引加1
self.setSelectedItem(self.selectedIndex + 1);
}
event.preventDefault();
return;
}
//enter键
if (event.keyCode == 13) {
//列表为空或者鼠标离开导致当前没有索引值
if (self.$autocomplete.find('li').length == 0 || self.selectedIndex == -1) {
return;
}
self.$Input.val(self.$autocomplete.find('li').eq(self.selectedIndex).text());
self.$autocomplete.empty().hide();
event.preventDefault();
return;
}
//esc键
if (event.keyCode == 27) {
self.$autocomplete.empty().hide();
event.preventDefault();
}
});
//设置当输入框失去焦点时,消去
this.$Input.blur(function () {
setTimeout(function(){self.$autocomplete.empty().hide();},100);//这个地方名空间和复杂,不要修改
});
}; AutoCompleteInput.prototype.clear = function(){
//if(this.$autocomplete)
this.$autocomplete.empty().hide();
};
AutoCompleteInput.prototype.setSelectedItem = function (index) {
//更新索引变量
this.selectedIndex = index;
//按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0
if (this.selectedIndex < 0) {
this.selectedIndex = this.$autocomplete.find('li').length - 1;
}
else if (this.selectedIndex > this.$autocomplete.find('li').length - 1) {
this.selectedIndex = 0;
}
//首先移除其他列表项的高亮背景,然后再高亮当前索引的背景
this.$autocomplete.find('li').css("background-color","white")
.eq(this.selectedIndex).css("background-color","#9ACCFB");
};
return AutoCompleteInput;
});
测试代码:
var f = function(obj,txt){
if(txt=="a"){
obj.setAutoText("a,aa,aaa");
}
if(txt=="b"){
obj.setAutoText("b,bb,bbb");
}
};
var p = new inp(document.getElementById("input"),f);
var p2 = new inp(document.getElementById("i2"),f);
JS类百度的动态提示框思路及完成的更多相关文章
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- JS使用cookie实现DIV提示框只显示一次的方法
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...
- JS实现动态提示框
引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...
- JS学习笔记 -- 定时器,提示框的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现弹出的提示框只弹出一次
<script type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); if (/iph ...
- js关于移入移出延迟提示框效果处理
html部分 <div id="div1">我是导航君</div> <div id="div2" style="disp ...
- js提交前弹出提示框
<form target="_blank" name="f1" method="post" action="sub2.php ...
- JS定时器的使用--延时提示框
<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...
随机推荐
- python对比两个文件问题
写一个比较两个文本文件的程序. 如果不同, 给出第一个不同处的行号和 列号. 比较的时候可以使用zip()函数 a=open('test.txt','r') b=open('test2.txt','r ...
- PPT2010中设置音乐播放停止位置
ppt不仅只是制作幻灯片的效果,而且在制作幻灯片过程中,由于内容很多,每个版块想要呈现的效果是不同的,那么配乐的风格自然也是不同.如何让我们插入的音乐在合适的内容的时候播放和停止呢,下面就来教大家具体 ...
- 12100 Printer Queue(优先队列)
12100 Printer Queue12 The only printer in the computer science students’ union is experiencing an ex ...
- js渲染引擎 tempo.js
1.引入tempo.js <script src="js/tempo.js" type="text/javascript"></script& ...
- xilinx FPGA普通IO作PLL时钟输入
本帖转自于 :http://www.cnblogs.com/jamesnt/p/3535073.html 在xilinx ZC7020的片子上做的实验; [结论] 普通IO不能直接作PLL的时钟输入, ...
- j2ee爬坑行之二 servlet
servlet生命周期 web容器加载servlet 类 web容器调用servlet的构造函数,初始化servlet. web容器调用servlet的init()方法.注意该方法在servlet的一 ...
- 基于MINA框架快速开发网络应用程序
1.MINA框架简介 MINA(Multipurpose Infrastructure for Network Applications)是用于开发高性能和高可用性的网络应用程序的基础框架.通过使用M ...
- 收藏maven错误
错误原因: 编译下载最新的maven源代码,但是出现错误.错误如下: [WARNING] Some problems were encountered while building the effec ...
- 十大众筹PC:硅谷新生代如何打造下一代计算机
十大众筹PC:硅谷新生代如何打造下一代计算机 来源:CNET科技资讯网 众筹革命已经让众多吸引人的台式机,笔电和平板PC诞生.下面就是最引人注意和最成功的典范. 尽管PC市场不再象过去那样是一 ...
- Hadoop FileInputFormat实现原理及源码分析
FileInputFormat(org.apache.hadoop.mapreduce.lib.input.FileInputFormat)是专门针对文件类型的数据源而设计的,也是一个抽象类,它提供两 ...