input输入框的自动匹配(原生代码)

今天看群里有人发起了人人网以前一些面试题，我以前也转载过一些，恰好闲着，挑选一题来做做，练个手。

本题有以下要求：
1. 使用原生代码实现，不可使用任何框架；
2. 对 input框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input框的下方；
3. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗；
4. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input框中；
思 路
捕捉输入变化，用用户输入的值（下称输入值）去匹配列表项，这里假设列表项是查询返回的一个数组（下称列表），匹配方式为用输入值作为开始值匹配每个列表值，将符合筛选条件的项输出到页面。
分 析
第三点要求中关键字是加粗，这里用正则替换就好了。
第四点要求的关键字就比较多了，一句话暗藏许多杀机，这一部分主要是针对键盘，首先是上下按键，然后是回车，还有一个写入到input框。

到这，如果你认为完了那就操之过急了，至少还有4个隐性的需求。
•第一项默认高亮显示，上下按键的同时当前项高亮。
•按下Enter默认第一项被选中。
•鼠标经过时当前项高亮。
•支持点击选中项。
也许还有所遗漏，这里就不纠结了。
实 践
这虽然是一道JS题，但这之前，页面结构还是要先写好。


代码如下:

<div id="wrap">
<input type="text" id="put" />
</div>
<div id="menu">
<div>
<ul id="output">
<li>占位</li>
<li>占坑</li>
</ul>
</div>
</div>

由于不允许用框架，这里对一些可能要到的方法作一个简单的封装。
首先创建一个封装对象，暂且取名 dom，接下来的原生方法都放进这个对象以作复用。


代码如下:

var dom = {
$ : function( id ){
return document.getElementById(id);
},
tag : function( tagName,root ){
root = root ? root : document;
return this.makeArray( root.getElementsByTagName(tagName) );
},
bind : function( element,type,handler ){
if( document.addEventListener ){
element.addEventListener( type,handler,false );
}else if( document.attachEvent ){
element.attachEvent( 'on' + type,handler );
};
},
removeClass : function( list,name ){
var el = list[i],
r = new RegExp('\\s*\\b' + name + '\\b\\s*','g');
for( var i = 0 , len = list.length ; i < len ; i++ ){
var cur = list[i];
if( r.test( cur.className ) ){
cur.className = cur.className.replace(r,'');
};
};
},
height : function( element ){
return element.offsetHeight;
},
getBound : function( element ){
return element.getBoundingClientRect();
},
getText : function( element ){
return element.textContent ? element.textContent : element.innerText;
},
trim : function( string ){
return string.replace( /^\s*(.*)\s*$/,'$1' );
},
makeArray : function( tagList ){
for( var i = 0 , arr = [] , len = tagList.length ; i < len ; i++ ){
arr.push( tagList[i] );
};
return arr;
},
isVisible : function( element ){
return element.style.display == 'block';
}
};

接着再创建一个对象，用于存放具体的处理逻辑，作者英文比较狗血，就叫autoMatch吧。
这个对象要做的事情可多了：
•确定好菜单的位置；
•实时处理用户输入；
•处理鼠标和键盘按键动作；
确定菜单的位置 用封装对象dom的getBound方法，返回一个边界对象，此对象有两个属性left和top。眼熟吧，它类似jQuery里的offset()方法。
处理用户输入这里值得一提，由于是实时处理，开始考虑用onchange事件，但是它只会在失去焦点时才触发，所以是不合理的。
这时我的目光转向了oninput，它完全能够胜任工作。


代码如下:

dom.bind( obj.input,'input' , this.inputProcess );

可是，IE又做了一回不走寻常路的事儿。它并不支持oninput。
空欢喜一场，白瞎了！
凡事总是有转机的。角落里的onpropertychange向我们缓缓走来…，它和oninput非常相似，有着一样的特性，至少在捕捉input输入方面，正是我想要的，对付IE，我们都用它，用了都说好。
再绑定一次：


代码如下:

dom.bind( obj.input,'propertychange' , this.inputProcess );

接下来是按键，上，下，回车。对应的键编码分别是38、40、13，唯一需要注意的是FF和IE的属性名称不一样。
详细的实现细节见Demo：
猛击我查看Demo
真实业务场景中，可能要对用户的输入作实时Ajax查询，这代表着每敲一个字母都会有一次查询。
然而如此频繁发送Ajax请求实在太不划算，响应速度上也不容许这样的实现。
我的思路是当用户敲第一个字母时，发送一次请求（请求数据一般有数量限制，一般是10条），并将返回值储存起来（下称缓存）。
在第一个字母之后的用户输入，都在缓存里面筛选，到这里就如同本地查询一样了，每输入一个字母，精确度越来越高，缓存越来越小。
当用户清空，重新输入时重复以上的步骤。
当然，不排除会有一些更加复杂的业务场景，比如，在匹配充足的情况下，要保证用户每次输入都有10条数据可选，这就需要更多的判断以及请求。
所以，具体实现取决于真实的业务场景。
至此，本文结束。感谢阅读，欢迎有血有肉的置评。

赞 (0)

相关推荐

  • jQuery 版本的文本输入框检查器Input Check

    复制代码 代码如下: /** * power by wooshoo copyright 2008-2009 * 程序名:JQuery 专用输入检查器 * 内容:专门针对input[text password hidden]以及textarea的用户输入进行检查 * 检查的范围包括:字符数.是否包含特殊字符.是否为整数.是否符合email格式.是否为电话号码. * 是否为网站地址.是否为图片地址.是否为浮点小数.是否为人民币货币.是否为日期格式 * 是否为时间格式.是否为日期时间格式.是否为密码格

  • jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las

  • 制作符合用户体验的漂亮的input输入框

    今天来说说鄙人对input输入框在处理上的细节处理和心得,其实制作一个符合CSS标准.FF/IE7/IE6等主流浏览器全兼容.符合用户体验的input其实并不难.先点击看看下面的效果先! 我们-www.jb51.net表单效果 *{ margin:0; padding:0; } body{ font-size:63%; color:#000; } /*input*/ .input_on{ padding:2px 8px 0pt 3px; height:18px; border:1px solid

  • input 输入框内的输入事件详细分析

    1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 2.用例:对每个浏览器分别测试如下的情况: –输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等 3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件) chrome: +开启输入法时,可以捕捉到输入事件. +开启输入法的时

  • javascritp实现input输入框相关限制用法

    1.取消按钮按下时的虚线框  在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容  在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用)  <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框  <input onkeydown="

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

  • js监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

  • input输入框的自动匹配(原生代码)

    今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手. 本题有以下要求: 1. 使用原生代码实现,不可使用任何框架: 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方: 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗: 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中: 思 路 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询

  • js输入框邮箱自动提示功能代码实现

    同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

  • JavaScript实现邮箱地址自动匹配功能代码

    JavaScript实现邮箱地址自动匹配功能代码

    自动匹配技术:简单的来说就是"根据用户输入的信息来提示一些相似项供用户选择".具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息:再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了.下面这个例子是比较简单的我们常用邮箱的匹配.代码如下: 1.css代码 #match_email { margin-left:48px; overflow:auto; display:none; width:200px; border:1px solid #aaa

  • vue input输入框模糊查询的示例代码

    vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • input输入框内容实时监测(附代码)

    输入框内容实时监测!只有输入框内容发生改变才会触发事件,如果输入框内容没有改变则不会触发该事件! 代码如下: <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> function OnInput (event) { alert (event.target.value); }

  • vue原生input输入框原理剖析

    目录 正文 v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据. 如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值. 只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新

  • 利用js 进行输入框自动匹配字符的小例子

    html 复制代码 代码如下: <p><span style="font-size: 18px; ">输入框自动匹配字符~</span></p><p><span style="font-size: 18px; ">但是遇到一个问题~所有匹配的字符要事先写好~大概如果是大型网站的话~应该是利用数据库的记录吧</span></p><p><span style

  • 基于javascript实现仿百度输入框自动匹配功能

    本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

  • element input输入框自动获取焦点的实现

    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态. 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要

随机推荐