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页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

随机推荐

EasyMock.replay()有什么用
现在很多项目都使用EasyMock来作为单元测试框架. EasyMock一个方法,基本上是三步:EasyMock.expect().EasyMock.replay().EasyMock.verify( ...
洛谷$P2604\ [ZJOI2010]$网络扩容网络流
正解:网络流解题报告: 传送门$QwQ$ 昂第一问跑个最大流就成不说$QwQ$ 然后第二问,首先原来剩下的边就成了费用为0的边?然后原来的所有边连接的两点都给加上流量为$inf$费用为$w$的边,保 ...
洛谷P2858 奶牛零食题解区间DP入门题
题目大意: 约翰经常给产奶量高的奶牛发特殊津贴,于是很快奶牛们拥有了大笔不知该怎么花的钱．为此,约翰购置了 $N(1 \le N \le 2000)$ 份美味的零食来卖给奶牛们．每天约翰售出一份零 ...
day2(使用list和tuple)
list list是一种有序的集合 >>>aaa = ['abc','bob','tracy'] >>>aaa ['abc','bob','tracy'] len( ...
web前端常用知识点
1.常见的块级元素内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr ...
端口扫描器--利用python的nmap模块
安装nmap模块挺麻烦的,搞了半天不仅要安装pip install nmap 还要sudo apt install nmap 给出代码,没有设多线程,有点慢,注意端口的类型转换,搞了很久 #!/us ...
【转】线性插值(Linear Interpolation)基本原理
转:https://blog.csdn.net/u010312937/article/details/82055431 今天在阅读大牛代码的时候,发现了Linear Interpolation一次,百 ...
HTTP，来一个详细的学习。
HTTP 认识 HTTP 首先你听的最多的应该就是 HTTP 是一种超文本传输协议(Hypertext Transfer Protocol),这你一定能说出来,但是这样还不够,假如你是大厂面试官,这 ...
输入n个学生，并且输入成绩，判断是否偏科
H学校的领导主任决定分析一下今年所有N名学生的考试成绩,从中找出偏科的学生,考试成绩包含语文,数学,英语三门课程的分数,已知偏科的定义是:某一门课程的分数大于等于90,并且另外两门的分数小于等于70. ...
输入n个字符串，找出最长最短字符串（若有个数相同的，都打印出来）
首先,要求找到最长最短字符串,我们应该用数组将其存起来,输入的个数是不固定的,我们就可以用Scanner获取要输入的个数,最终找到的个数也不固定,我们可以封装两个方法,并且返回值类型为数组. 我遇到的 ...

input输入框联想功能

input输入框联想功能的更多相关文章

随机推荐

热门专题