JavaScript 文本框下拉提示(自动提示)
文本框下拉提示效果
html{overflow:-moz-scrollbars-vertical;}
body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;}
button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;}
button,input,select,textarea{font-size:100%;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:650px;margin:0 auto;}
.txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;}
.autoDis{border:1px solid #999;position:absolute;overflow:hidden;}
.autoDis p{line-height:25px;cursor:default;padding:0 5px;}
.autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;}
.autoDis .cur{background:#ccc;}
提示:可以输入"1"开头的
(autoComplete={
pop_len:10,
pop_cn:'autoDis',
hover_cn:'cur',
source:'13612345564|13825646464|13412236054|13012348564|13012345564|13012365564|彭小|王达|李相公|周欢欢'.split('|'),
init:function(){
this.setDom();
return this;
},
bind:function(x){
if(x.getAttribute('type') != 'text' || x.nodeName != 'INPUT')
return null;
var self = this;
x.onkeyup = function(e){
e = e || window.event;
var lis = self.pop.getElementsByTagName('li'),lens = self.pop.getElementsByTagName('li').length,n=lens,temp;
if(e.keyCode == 38){ //键盘up键被按下
if(self.pop.style.display != 'none'){
for(var i=0;ithis.pop_len?this.pop_len:bak.length;
for(var i=0;i' + bak[i] +'
');
this.pop.getElementsByTagName('ul')[0].innerHTML = li.join('');
this.pop.style.display='block';
}
}).init().bind(document.getElementById('autoCom')).bind(document.getElementById('autoC'));
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
纯JavaScript基于notie.js插件实现消息提示特效
本文实例介绍了纯JavaScript实现消息提示特效是一款基于notie.js插件实现的可以制作Alert提示框,确认框和带输入的消息框,分享给大家供大家参考,具体内容如下 效果图: 实现的代码: html代码: <br><br><br><br><br><br> <article class="zzsc"> <div class="div-ext"> <div cl
-
不提示直接关闭网页窗口的JS示例代码
在IE7.IE8中,使用JavaScript提供的close()方法都可以关闭当前窗口或标签,但都提示讨厌的对话框,找了下代码,终于可以无提示直接关闭了. JavaScript代码 复制代码 代码如下: function CloseWin() { window.opener=null; window.open('','_self'); window.close(); } 实例: XML/HTML代码1.<input type=button v
-
简单JS自动提示文本框代码
本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图: 1.建立框架结构: 复制代码 代码如下: <body> <form method="post" name="myForm1"> Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> <
-
JS模仿MSN右下角弹出提示框代码
aa * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-size: 14px; line-height: 24px; } #tip { position: absolute; right: 0px; bottom: 0px; height: 0px; width: 180px; border: 1px solid #CCCCCC; background-color: #eeeeee; padding
-
Chrome扩展页面动态绑定JS事件提示错误
问题描述: 当开发Chrome扩展时,页面的popup.html中需要js的时候,直接将JS写在动态绑定JS事件会提示: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".. 解决办法: 在popup.html中引用外部的js文件动态绑定JS
-
Jquery 返回json数据在IE浏览器中提示下载的问题
今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,但是IE里老是提示保存,在网上搜索了下,大部分是说将ContentType设置为"text/xml"本人测试了下,返回值为undefined, 原返回值设定:context.Response.ContentType = "application/json"; 尝试: context.Response.ContentType = "t
-
让ie运行js时提示允许阻止内容运行的解决方法
让ie运行js不再提示允许阻止内容 打开IE-工具-Internet选项-安全-自定义级别-脚本-活动脚本启用 打开IE-工具-Internet选项-高级-安全-允许活动内容在我的机器上运行
-
js实现的标题栏新消息闪烁提示效果
公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind = { _step: 0, _title: document.title, _timer: null, //显示新消息提示 show: function() { var temps = newMessageRemind._title.replace("[ ]", "").re
-
JS仿百度搜索自动提示框匹配查询功能
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q
-
JavaScript 文本框下拉提示(自动提示)
文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,si
-
文本框输入时 实现自动提示(像百度、google一样)
只要有三个文件: 一个js插件autocomplete.js和autocomplete.css两个文件,这是jquery官方网站提供的插件: 他们的下载地址:http://jqueryui.com/demos/autocomplete/ 一个是一般处理程序 : 一个是apsx页面,看下面的代码吧; 前台: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { ShowUserLis
-
JS获取文本框,下拉框,单选框的值的简单实例
1.文本框 1.1 <input type="text" name="test" id="test"> 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例如: var m = "5";document.getElementById("test").value= m;
-
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript"> var nodeList = document.getElementsByTagName("input"); for (var i = 0; i < nodeList.length; i++) { nodeList[i].disabled = true;
-
基于JavaScript实现单选框下拉菜单添加文件效果
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"
-
JavaScript实现单击下拉框选择直接跳转页面的方法
本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
-
python tkinter之 复选、文本、下拉的实现
我就废话不多说了,直接看代码吧! import tkinter as tk from tkinter import ttk win = tk.Tk() win.title("Python GUI") # 添加标题 ttk.Label(win, text="Chooes a number").grid(column=1, row=0) # 添加一个标签0 ttk.Label(win, text="Enter a name:").grid(colum
-
Antd下拉选择,自动匹配功能的实现
我就废话不多说了,大家还是直接看代码吧~ <Select placeholder="客户名称" showSearch optionFilterProp="children"//自动匹配输入 onChange={this.selectChange} > {this.state.selectCustomer} </Select> 补充知识:antd select如何支持既能输入不存在的选项又能进行下拉框选择 1.Select必须具备onSearc
-
javascript文本框内输入文字倒计数的方法
本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if
-
使用Javascript实现选择下拉菜单互移并排序
本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码. 代码如下: <html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <
随机推荐
- Web 开发中遇到的UTF-8编码的问题总结第1/2页
- VBS获取外网IP地址并发送到指定邮箱的代码
- 在linux系统下安装redis的方法
- Compact 显示和更改 NTFS 分区上的文件或目录压缩
- 25个最好的免费Eclipse插件
- asp.net基于Calendar实现blog日历功能示例
- C#反射技术的简单操作(读取和设置类的属性)
- 解决了Ajax、MySQL 和 Zend Framework 的乱码问题
- PHP与SQL语句常用大全
- 详解SpringBoot集成jsp(附源码)+遇到的坑
- javascript 跨域问题以及解决办法
- 整理Javascript基础语法学习笔记
- jQuery form插件之formDdata参数校验表单及验证后提交
- SQL语句的执行原理分析
- jQuery filter函数使用方法
- 利用jQuery异步上传文件的插件用法详解
- jQuery实现跨域iframe接口方法调用
- javaScript NameSpace 简单说明介绍
- 最精简的JavaScript实现鼠标拖动效果的方法
- python实现图片变亮或者变暗的方法