input输入框联想功能
一直想找一个可以连接后台，可以根据后台内容的input输入框，可以实现联想功能，网上找到一个简单的静态页面的输入框联想，经过一番修改之后终于可以实现读取自己定义的数组的联想了，其实也比较简单就是格式的问题。还是直接上代码吧。
首先是一个简单的界面
auto.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input自动补全</title>
<link rel="stylesheet" type="text/css" href="auto.css" />
</head> <body>
<div class="wrap">
<input type="text" id="input" class="auto-inp">
<div class="auto hidden" id="auto">
<div class="auto_out">1</div>
<div class="auto_out">2</div>
</div>
</div>
<%String[] a = {"a12","124","15"};
out.print(a[1]);
%> <script src="auto.js"></script>
<script> //var array = ['b12','b22','固戍','b4','b5','b6','如果爱','b7','b8','b2','abd','ab','西乡','accd','abd','qq音乐','b1','cd','ccd','cbcv','小王子','cxf','b0'];
var array=[
<%for(int i = 0 ; i < a.length;i++)
{
%>
'<%=a[i]%>', //一定要加上单引号
<%
}
%>
]
var autoComplete = new AutoComplete("input","auto",array);
document.getElementById("input").onkeyup = function(event){
autoComplete.start(event);
}
</script>
</body>
</html>
为了实现联想的内容是自己程序里的数组，我用了一个循环，将java中的数组添加到了js中，改了好长时间，后来才想到，对于js数组中还有其固定的格式，加了一个‘ <%=a[]%>’号之后就成了
然后对界面进行设计
auto.css
div,p,h1,h2,h3,h4,h5,h6,ul,li,span,input{
box-sizing: border-box;
font: 14px/20px "microsoft yahei";
}
div.wrap{
width: 240px;
margin: 20px auto 0 auto;
}
.auto-inp{
width: 240px;
height: 36px;
padding-left: .5em;
border-radius: 2px;
border: 1px solid #dedede;
color: #666;
outline: none;
}
.auto{
width: 240px;
border: 1px solid #dedede;
border-top: none;
position: absolute;
}
.auto_out{
width: 238px;
height: 36px;
line-height: 36px;
padding-left: .5em;
color: #000;
background: #fff;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.auto_out.on{
background: #eee;
cursor: pointer;
}
.hidden{
display: none;
}
然后就是主要起作用的部分了
auto.js:
// 数组去重
Array.prototype.unique = function(){
this.sort();
var res = [];
var json = {};
for (var i = 0; i < this.length; i++) {
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
} // 对样式操作
var setClass = {
hasClass: function(elements,cName){ // 判断是否含有某个class
if(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") ))
return true;
else
return false;
},
addClass: function(elements,cName){ // 添加class
if( !this.hasClass( elements,cName ) ){
elements.className += " " + cName;
};
},
removeClass: function(elements,cName){ // 移除某个class
if( this.hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
}
}
} var Bind = function(This){
return function(){
This.init();
}
} function AutoComplete(input,auto,arr) {
this.obj = document.getElementById(input);
this.autoObj = document.getElementById(auto);
this.search_value = ""; //当前的搜索输入值
this.index = -1; //当前选中的DIV的索引
this.value_arr = arr; //数据库中供检索的值 不包含重复值
}
AutoComplete.prototype = {
// 初始化
init: function(){
var This = this;
setClass.removeClass(This.autoObj,"hidden");
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
},
//删除自动完成需要的所有DIV
deleteDIV: function(){
while(this.autoObj.hasChildNodes()){
this.autoObj.removeChild(this.autoObj.firstChild);
}
setClass.addClass(this.autoObj,"hidden");
},
autoOnmouseover: function(index){
if(index != this.index){
setClass.addClass(this.autoObj.children[index],"on");
setClass.removeClass(this.autoObj.children[this.index],"on");
this.index = index;
}
},
setValue: function(This){
return function(){
This.obj.value = this.seq;
setClass.addClass(This.autoObj,"hidden");
}
},
// 响应键盘
pressKey: function(event){
var code = event.keyCode;
var length = this.autoObj.children.length;
if(code == 38){ //↑
setClass.removeClass(this.autoObj.children[this.index],"on");
this.index--;
if(this.index < 0){
this.index = length - 1;
}
setClass.addClass(this.autoObj.children[this.index],"on");
this.obj.value = this.autoObj.children[this.index].seq;
}else if(code == 40){ //↓
setClass.removeClass(this.autoObj.children[this.index],"on");
this.index++;
if(this.index > length-1){
this.index = 0;
}
setClass.addClass(this.autoObj.children[this.index],"on");
this.obj.value = this.autoObj.children[this.index].seq;
}else{ //回车
this.obj.value = this.autoObj.children[this.index].seq;
setClass.addClass(this.autoObj,"hidden");
this.index = -1;
}
},
// 程序入口
start: function(event){
event = event || window.event;
var code = event.keyCode;
var This = this;
if(code != 13 && code != 38 && code != 40){
this.init();
this.deleteDIV();
this.search_value = this.obj.value;
var valueArr = this.value_arr.unique();
//去掉前后空格不能为空
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){ return;}
//判断数组中是否含有输入的关键字
try{
var reg = new RegExp("("+ this.obj.value +")","i"); //输入"aaa" 则 reg = /(aaa)/i
}catch(e){
alert(e.message);
}
var div_index = 0; //记录匹配索引个数
for (var i = 0; i < valueArr.length; i++) {
if(reg.test(valueArr[i])){
var div = document.createElement("div");
div.className = "auto_out";
div.seq = valueArr[i];
div.index = div_index;
div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>");
this.autoObj.appendChild(div);
setClass.removeClass(this.autoObj,"hidden");
div_index++;
if(div_index == 1) {
setClass.addClass(this.autoObj.firstChild,"on");
this.index = 0;
}
div.onmouseover = function(){
This.autoOnmouseover(this.index);
}
div.onclick = this.setValue(This);
}
}
}else{
this.pressKey(event);
}
window.onresize = Bind(This);
}
}
input输入框联想功能的更多相关文章
- vue input输入框联想
以下是示例,样式可以自己修改.最后是效果图,其实也挺简单的,主要是用了watch监控input输入值的变化,如果数据是请后端请求可以,先请求数据. <template> <div c ...
- input输入框实现联想关键词功能
实现原理很简单,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- ajax实现文本框的联想功能
先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示. <%@ page language="java" contentType="te ...
- Input输入框输入银行卡号自动空格
input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~ 如果是这样,会不会好很多呢~~ 其实逻 ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包 实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性 回想起来 实现此功能很简单,1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
随机推荐
- 【题解】ARC101F Robots and Exits(DP转格路+树状数组优化DP)
[题解]ARC101F Robots and Exits(DP转格路+树状数组优化DP) 先删去所有只能进入一个洞的机器人,这对答案没有贡献 考虑一个机器人只能进入两个洞,且真正的限制条件是操作的前缀 ...
- Google被墙怎么办？
Google被墙怎么办? 1 声明 请小伙伴们遵守法律法规,我们只是为了更好的查询学习资料. 想使用Google查询相关资料 想使用Google账号管理收藏夹 想使用Google商店安装软件 == 2 ...
- Matlab学习过程中的一些小问题
1.Overload your functions by having variable number of input and output argumernt.Not only can we ov ...
- bootstrap:图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- bash shell-linux的预设shell
1.bash 是GNU 计划中重要的工具软件之一,目前也是Linux distributions 的标准shell.其主要功能如下: (1)命令记忆和历史功能,可以通过history查询,存储位置在~ ...
- Java读取数据库中的xml格式内容，解析后修改属性节点内容并写回数据库
直接附代码: 1.测试用的xml内容 <mxGraphModel> <root> <mxCell id="-1" /> <mxCell i ...
- Go Goosy Disk Docker Port Provisioners(GDP)
小伙伴们,她们中出了一个叛徒,他是谁?是谁?是谁? 由一则口口相传的故事开始吧: 中午吃饭时间抽空小李跑到同座大楼的小张公司串门,小李是一名docker顾问熟称砖家,这间公司老板想挖小李,他盯了前台不 ...
- 一个由"2020年1月7日 京东出现的重大 Bug 漏洞"引起的思考...
2020年1月7日,京东由于优惠券设置错误,导致大量产品以0元或者超低价成交,并且发货.网传小家电被薅24万件,损失损失金额高达7000多万.很多网友表示收到货了,在网上晒出到货截图.下面为购买截图: ...
- web实现点击左侧导航，右侧加载不同的网页（这种布局多用于后台管理系统）
(1)实现方法:采用ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) ( ...
- Vue中echarts的基本用法
前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...