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(txt){

};

足够简单吧?哈,下面就看实现了,请期待吧,估计晚上能写完。

时间: 2024-07-30 00:27:58

JS类百度的动态提示框思路及完成的相关文章

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果 2014-08-11 17:39 11614人阅读 评论(0) 收藏 举报  分类: iOS相关(20)  文章来自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显示的内容进行自定义,功能很强大,很多项目中都有使用到.到GitHub上可以下载到项目源码

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

本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感:利用Cookies,我们还可做超多的事情,慢慢体会吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-cod

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

1 <script type="text/javascript"> 2 var ua = navigator.userAgent.toLowerCase(); 3 if (/iphone|ipad|ipod/.test(ua)) { 4 //alert("iphone"); 5 } else if (/android/.test(ua)) { 6 var alertmessage="温馨提示:您可以在右下角的菜单中下载最新版本的手机版APP哦!

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

<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height:50px; background:red;} #div2{width:200px; height:200px; background:#999;} </style> <script> window.onload=function () { var oDiv1=document.get

百度地图信息提示框的修改 转

http://blog.csdn.net/jankercsdn/article/details/45392635 版权声明:本文为博主原创文章,未经博主允许不得转载. 一个小项目,百度地图的定制,电脑用的是触摸屏,支持手写输入,中文输入直接调用系统的虚拟键盘,手写输入是参考网上高手写的一个控件. 百度的信息提示框里的搜索框里要输入查询地址,就是去哪里,到哪里那个地址输入框,要解决的问题是怎么把虚拟输入键盘的内容赋值到这个地址输入框,并要判断当前是哪个输入框. 一般运用信息提示框是调用这个库“ht

JQUERY仿百度谷歌智能提示

  若使用jquery智能提示,则主要使用Ajax动态调用后台. 仿百度谷歌智能提示,说实话,本篇博客仿的不太缜密,有待继续完善. 仿百度谷歌智能提示,思路主要如下: 1.后台根据前台传递的参数进行匹配,提供数据列表. 2.前台美观智能展示选择数据列表 声明:此篇博客的后台是假数据,没有搭建数据库进行匹配. 来一张目前功能截图: 鼠标控制: 键盘控制: 选中之后: 思路:[重点前台] 监听输入框值变化,然后动态生成显示列表[仿] 显示列表中绑定各种事件(鼠标移近.移除.单击[仿] 文本框聚焦

百度搜索下拉框提示代码 opensug.js

opensug ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有"搜索框提示"功能的百度搜索框. HTML代码: <form action="http://www.baidu.com/baidu" target="_blank"> <table bgcolor="#FFFFFF"><tr><td>

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

【转】仿百度输入框智能提示的js代码

转自:http://www.jb51.net/article/40783.htm 对于我这个JS菜鸟,能找到这样的实属不容易啊!!! 刚开始老大让做这个功能,真是一点头绪都没有,万分感谢!!! 最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改.比如雏形那里我做了一个下拉列表 给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示 的功能. 参考了一下