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页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
随机推荐
- `docker数据持久化volume和bind mounts两种方式
将数据从宿主机到容器的三种方式: ,volumes:docker管理宿主机文件系统的一部分(/var/lib/docker/volumes)保存数据的最佳方式 ,bind mounts 将宿主机上的任 ...
- 源码分析 Kafka 消息发送流程(文末附流程图)
温馨提示:本文基于 Kafka 2.2.1 版本.本文主要是以源码的手段一步一步探究消息发送流程,如果对源码不感兴趣,可以直接跳到文末查看消息发送流程图与消息发送本地缓存存储结构. 从上文 初识 Ka ...
- 集合排序Comparable和Comparator有什么区别？
Comparable和Comparator兄弟俩长得是真像.但是,需要注意下,使用中它们还是有不少区别的.下面,就一探究竟吧. 一.Comparator 做过集合排序的童鞋应该知道,可以使用Colle ...
- Redis-NoSQL入门和概述（一）
NoSQL简史及定义 NoSQL 这个术语最早是在 1998 年被Carlo Strozzi命名在他的轻量的,开源的关系型数据库上的,但是该数据库没有提供标准的SQL接口:在2009 年再次被Eric ...
- 【python小随笔】python 解析xml数据的新手大坑>>抓取多重标签，遍历各标签的数据
xml文档: <GetMatchingProductResult ASIN="B071LF9R6G" status="Success">...< ...
- cc协议（知识共享，Creative Commons），程序员的基础守则之一
知识共享 我在浏览git开源代码的时候,浏览到一句话: 版权声明:本文为CSDN博主「...」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:http ...
- 关于javaweb开发的环境搭建（一）Tomcat
进行Tomcat的下载及环境配置 1.下载地址 http://tomcat.apache.org/ 2.下载的注意事项 下载的Tomcat版本要与自身电脑安装的java版本相匹配,下载时,点击 ...
- 【转】在MyEclipse 8.6上搭建Android开发环境
内容导航 第 1 页:基本环境准备 第 2 页:下载Android SDK 第 3 页:配置SDK环境变量 第 4 页:给MyEclipse安装ADT插件 第 5 页:配置MyEclipse 第 6 ...
- Java 集合的工具类Collections的常用方法
Collections类 java.utils.Collections是集合工具类,用来对集合进行操作. Collections类的常用方法 这里介绍四个常用方法: addAll(Collection ...
- 《【面试突击】— Redis篇》-- Redis哨兵原理及持久化机制
能坚持别人不能坚持的,才能拥有别人未曾拥有的.关注编程大道公众号,让我们一同坚持心中所想,一起成长!! <[面试突击]— Redis篇>-- Redis哨兵原理及持久化机制 在这个系列里, ...