参考的代码来自这里:

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类百度的动态提示框思路及完成的更多相关文章

  1. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  2. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  3. JS使用cookie实现DIV提示框只显示一次的方法

    本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...

  4. JS实现动态提示框

    引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...

  5. JS学习笔记 -- 定时器,提示框的应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js实现弹出的提示框只弹出一次

    <script type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); if (/iph ...

  7. js关于移入移出延迟提示框效果处理

    html部分 <div id="div1">我是导航君</div> <div id="div2" style="disp ...

  8. js提交前弹出提示框

    <form target="_blank" name="f1" method="post" action="sub2.php ...

  9. JS定时器的使用--延时提示框

    <title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...

随机推荐

  1. 94 Binary Tree Inorder Traversal(二叉树中序遍历Medium)

    题目意思:二叉树中序遍历,结果存在vector<int>中 解题思路:迭代 迭代实现: /** * Definition for a binary tree node. * struct ...

  2. excel设置单元格不可编辑

    把允许编辑的单元格选定,右键-设置单元格格式-保护,把锁定前的对钩去掉.再点工具-保护工作表.这样就可以只让你刚才设定的单元格允许编辑,其他不允许.

  3. JS中 submit提交与Form表单里的onsubmit的调用问题?

    最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,在提交前触发这个button的onclick事件,在其事件中触发form的submit事件.问题出现了: &l ...

  4. 【行为型】State模式

    状态模式其意图是在一个对象的状态发生变化时能够同时改变它的行为.一个生活中比较常见的例子就如你(是指你自己本人)在走时时,整个人全身的动作是双手臂前后慢慢摇摆且双脚也是一步一步慢慢往前移的,即:该走路 ...

  5. DCI

    理论: 某个data,在一个特定的场景中,以某个角色role,来与该场景中的其他角色进行交互.这个过程要以代码的方式表达出来,他要求data本身不具备交互行为, 有交互行为的是角色,当一个data没有 ...

  6. hdu 3400 Line belt

    题意:给你两条线段AB,CD:然后给你在AB,CD上的速度P,Q,在其它部分的速度是R,然后求A到D的最短时间. 思路:用三分枚举从AB线段上离开的点,然后再用三分枚举在CD的上的点找到最优点,求距离 ...

  7. 关于KeilC51的指针(参见, page 106-113, keil uv2 user's guide 09,2001)

    keil中的指针分为两种,一种是普通指针,兼容标准C语言的指针:另一种是我翻译成内存特殊指针(memory-specific pointers,翻译的不好:>) 一.普通指针 普通指针的定义方式 ...

  8. POJ2632 Crashing Robots(模拟)

    题目链接. 分析: 虽说是简单的模拟,却调试了很长时间. 调试这么长时间总结来的经验: 1.坐标系要和题目建的一样,要不就会有各种麻烦. 2.在向前移动过程中碰到其他的机器人也不行,这个题目说啦:a ...

  9. (转载)PHP删除数组中的特定元素的代码

    (转载)http://www.jb51.net/article/30689.htm 我们知道,PHP没有提供专门删除一个特定数组元素的方法.但是可以通过unset()函数来完成这种要求比如下面的程序: ...

  10. OAuth2的学习小结

    Spring Security json Access maven OAUTH2核心参数说明 grant_type参数说明表格: grant_type 说明 authorization_code 标准 ...