js实现输入框输入的自动匹配功能

最新推荐文章于 2022-02-18 10:58:40 发布
最新推荐文章于 2022-02-18 10:58:40 发布
阅读量1.6k 收藏
点赞数
分类专栏： js 文章标签： CSS UP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weickchen/article/details/83558930
版权

完成输入框输入的自动匹配功能。

参考：http://www.yisoutong.cn/html/?11112.html

这里增加了和输入拼音相对应的中文匹配。

如果能进一步完善，多谢指教。核心JS代码如下，DEMO见附件。

 

 

/**
 * 输入框的自动匹配核心控制类
 * @param $fixDom    存放用于匹配的值的DIV对象
 */
function InputAutoFix($aConfig){
    var aConfig=$aConfig;
    var _msgEn=[]; //预先用于匹配的值，匹配值的拼音描述
    var _msgCh=[]; //预先用于匹配的值，匹配值的中文描述
    var _sb=null; //和输入值匹配的值
    var _domCh=aConfig.fixDom;
    if(_domCh==null || typeof(_domCh)=="undefined"){
        return;
    }
    var _canFix=false; //能否匹配
    var _instance=null;
    var _key=null;
    var _inputDom=aConfig.inputDom; //输入框对象
    var _index=0; //匹配容器中匹配值的索引
    var _isNotOut=false; //匹配值索引是否超出匹配值的长度
    var _currentValue=null; //当前输入框中的值
    _domCh.style.visibility="hidden";
    _domCh.style.position="absolute";
    _domCh.style.zIndex="999";
    _domCh.style.overflowY="auto";
	_domCh.style.overflowX="hidden";
    _domCh.style.height="50"; //初始化为50



    this.beginHandleAuto=beginHandleAuto;

    this.directionKey=directionKey;    // 针对匹配结果进行键盘操作的事件定义

    this.doMouseover=doMouseover;  //匹配值的onmouseover事件时的样式

    this.doMouseout=doMouseout;    //匹配值的onmouseout事件时的样式

    this.doOnclick=doOnclick;   //匹配值的onclick事件定义

    this.item=item;         //存储预先准备匹配的值

    this.append=append;   //把匹配的值加载到匹配值的容器中

    this.display=display; //找到匹配值后显示存放匹配值的容器

    this.setInstance=setInstance;       //设置实例
    function setInstance($instanceName,$aConfigInstance){
        _instance=$instanceName;
        aConfig.instance=$aConfigInstance;
    }
    /**
     * 开始匹配
     * @param $inputValue
     * @param $event
     */
    function beginHandleAuto($inputValue){
        _currentValue=$inputValue;
        if(_currentValue==""){
            if(_domCh.style.visibility=="visible"){
                _domCh.style.visibility="hidden";
            }
            return;
        }
        var isEn=false;
        var regDirty=/^(\/|\?|\,)|\\/; //非法字符输入
        if(regDirty.test(_currentValue)){
            return;
        }
        var regChar=/^([A-Za-z])+$/i; //英文输入的匹配
        var reg=new RegExp("^"+_currentValue+"","i"); //从开始位置进行匹配，忽略大小写
        _canFix=false;
//        _isNotOut=true;
        _sb=[];
        _domCh.innerHTML="";
        //当前输入的是英文
        if(regChar.test(_currentValue)){
            isEn=true;
        }
        //对输入的值进行匹配
        for(var i=0;i<_msgCh.length;i++){
            //当前输入的是英文
            if(isEn){
                if(_msgEn.length>0){
                    if(reg.test(_msgEn[i])){
                        if(_msgCh[i]!=null){
                            append(_msgCh[i]);//显示和英文对应的中文
                            _canFix=true;
                        }
                    }
                }
            }else{ //输入中文进行匹配
                if(_msgCh[i]!=null){
                    if(reg.test(_msgCh[i])){
                        append(_msgCh[i]);
                        _canFix=true;
                    }
                }
            }
        }
        //匹配后显示匹配容器
        try{
            display();
        }catch(e){
            alert("不能正常显示匹配容器："+e.description);
            return;
        }
        //对匹配容器中的匹配值进行特殊的样式处理
        if(_canFix){
            if(event.keyCode==13 || event.keyCode==40 || event.keyCode==38){ //enter,down,up
                directionKey();
            }else{
                _index=0;
                _domCh.childNodes[_index].className="mouseover";
                _isNotOut=true;
            }
        }
    };
    /**
     * 把和输入的值匹配的匹配值加载到匹配容器中并显示
     * @param $value 和输入的值相匹配的匹配容器中的匹配值
     */
    function append($value){
        if($value==null){
            return;
        }
        var fixValue=$value;
        _sb.push(fixValue);
        var divDom=document.createElement("DIV");
        //对匹配的值进行鼠标事件的绑定，主要是改变样式
        divDom.οnmοuseοver=function(){doMouseover(this);}
        divDom.οnmοuseοut=function(){doMouseout(this)};
        divDom.οnclick=function(){doOnclick(fixValue)};
        //如果匹配，对输入框中的值进行加粗处理
        var reg=new RegExp("("+_currentValue+")","i");
        divDom.style.lineHeight="140%";
        divDom.className="mouseout";
        if(_currentValue){
           divDom.innerHTML=$value.replace(reg,"<strong>$1</strong>"); //对匹配的字符进行加粗处理
        }
        divDom.style.fontFamily="宋体";
        _domCh.appendChild(divDom);
    };
    /**
     * 针对匹配结果进行键盘操作的事件定义 :
     * 1、在匹配结果中向上移动光标
     * 2、在匹配结果中向下移动光标
     * 3、对合适的匹配结果进行enter的操作
     * 注意: 各个匹配结果的索引的变化
     */
    function directionKey(){
        var key=event.keyCode;
        var len=_domCh.childNodes.length;
        if(_index>len-1 || _index<0){
            _isNotOut=false;
        }
        if(key==40 && _isNotOut){  //光标向下移动
            _domCh.childNodes[_index].className="mouseout";
            if(_index>=len-1){
                _index=0;
            }else{
                _index++;
            }
            try{
                _domCh.childNodes[_index].className="mouseover";
            }catch(e){
                alert("key=40"+e.description);
            }
        }
        if(key==38 && _isNotOut){ //光标向上移动
            _domCh.childNodes[_index].className="mouseout";
            if(_index<=0){
                _index=len-1;
            }else{
                _index--;
            }
            try{
                _domCh.childNodes[_index].className="mouseover";
            }catch(e){
                alert("key=38"+e.description);
            }
        }
        if(key==13){ //enter
            if(_domCh.childNodes[_index] && _domCh.style.visibility=="visible"){
                _inputDom.value=_sb[_index];
                _domCh.style.visibility="hidden";
            }
        }
        if(!_isNotOut){ //重新初始化索引
            _index=0;
            _domCh.childNodes[0].className="mouseover";
            _isNotOut=true;
        }
    };
    /**
     * 对匹配值所在的dom进行onmousever的事件样式处理
     * @param $obj  匹配值所在的dom
     */
    function doMouseover($obj){
        var dom=$obj;
        if(_domCh.childNodes.length==0){
            //return;
        }else{
            _domCh.childNodes[_index].className="mouseout";
        }
        _index=0;
        if(dom.tagName=="DIV"){
            dom.className="mouseover";
        }else{
            dom.parentElement.className="mouseover";
        }
    };
    /**
     * 匹配值的onmouseout事件时的样式
     * @param $obj
     */
    function doMouseout($obj){
        var dom=$obj;
        if(dom.tagName=="DIV"){
            dom.className="mouseout";
        }else{
            dom.parentElement.className="mouseout";
        }
    };
    /**
     * 对匹配值的进行选择的onclick事件
     * @param $msg 匹配容器中和输入值相匹配的值
     */
    function doOnclick($msg){
        var v=$msg;
        if(_inputDom==null){
            return;
        }
        _inputDom.value=v;
        //选定匹配值后隐藏显示匹配值的容器
        _domCh.style.visibility="hidden";
    };
    //隐藏下拉面板
    this.hideSel=hideSel;
    function hideSel(){
        if(_domCh.style.visibility=="visible"){
           _domCh.style.visibility="hidden";
        }
    }
    /**
     * 存储用于匹配的值
     * 如果值有多个，用，分隔
     * @param $msg 用于匹配的值
     * @param $tag  值类型的标记
     */
    function item($msg,$tag){
        var items=$msg;
        if(items.indexOf(",")!=0){
            var arrMsg=items.split(",");
            for(var i=0;i<arrMsg.length;i++){
                if(arrMsg[i]!=null){
                    if("ch"==$tag){ //中文
                        _msgCh.push(arrMsg[i]);
                    }else{  //和中文对应的拼音
                        _msgEn.push(arrMsg[i]);
                    }
                }
            }
        }else{
            if("ch"==$tag){
                _msgCh.push(items);
            }else{
                _msgEn.push(items);
            }
        }
         //@note: 因为要中文及其拼音对应，所以这里不再做排序处理
//       _msgCh.sort();
//        _msgEn.sort();
    };
    /**
     * 显示用于匹配的匹配容器
     */
    function display(){
        if(_canFix && _currentValue!=null){
            var dom=_inputDom;
            var x=0;
            var y=0;
            while(dom!=null){
                x+=dom["offsetLeft"];
                y+=dom['offsetTop'];
                dom=dom.offsetParent;
            }
           _domCh.style.left=x;
            _domCh.style.height=_msgCh.length+80;
           _domCh.style.width=_inputDom.offsetWidth;
            _domCh.style.top=y+22;
            _domCh.style.visibility="visible";
        }else {
            _domCh.style.visibility="hidden";
        }
    };
}
/**
 * 自动匹配所用的dom对象配置
 * @param $inputDom  匹配用的输入框对象
 * @param $fixDomEn   存放中文匹配值div对象
 * @param $fixDomCh   存放和中文相对应的英文匹配值的div对象
 */
function AutoDomConfig($inputDom,$fixDom){
    this.instance=null;  //AutoDomConfig对象实例
    this.css="autoFix.css";
    this.inputDom=$inputDom;
    this.fixDom=$fixDom;
}
function AutoFix(){
    this.init=init;
    var autoFix=null;
    var inputDom=null;
	var dom=null;
    var config=null;
    var msgCh=null;
    var msgEn=null;
    /**
     * 执行初始化操作
     * @param $dom  输入框对象
     * @param $fixDom    存放匹配值的对象
     * @param $fixDomCh 存放匹配值的对象，一般是英文对应的中文
     */
    function init($dom,$fixDom,$msgCh,$msgEn){
        dom=$fixDom;
        inputDom=$dom;
        msgCh=$msgCh;
        msgEn=$msgEn;
        config=new AutoDomConfig(inputDom,dom);
        var instance=inputDom.getAttribute("wc.instance");
        autoFix=new InputAutoFix(config);
        autoFix.setInstance(instance,config);
        eval("window."+instance+"=autoFix");
        __loadCss(config.css);
        if(msgCh!=null && msgCh.length>0){
            autoFix.item(msgCh,"ch");
        }if(msgEn!=null && msgEn.length>0){
            autoFix.item(msgEn,"en");
        }
    };
    this.doHide=doHide;
    function doHide(){
        if(autoFix==null){
            return;
        }
        autoFix.hideSel();
    }
    /**
     * 开始匹配
     * @param $currentValue
     */
    this.beginRender=beginRender;
    function beginRender($currentValue){
        var currentValue=$currentValue;
        autoFix.beginHandleAuto(currentValue);
    }
    //加载CSS文件
    function __loadCss($css) {
    	var node = document.createElement("LINK");
  	    node.rel = "Stylesheet";
  	    node.type = "text/css";
        node.href = $css; 
  	    document.all.tags("HEAD")[0].appendChild(node);
    }
	
}
var auFix=new AutoFix();
 

 

weickchen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现输入信息自动匹配功能
javaEE 专栏 + 琐事小计
07-01 5912
      一个纯手工的模仿BAIDU和GOOGLE的输入信息自动匹配的功能封装，为了应付项目组的需要。本人基本上是不太会写JS，高人看了代码千万不要笑哦。但思路上对新手还是有些帮助的，我想是这样的。好了，废话不多说，看代码...  JSP代码（autoAdaptation.jsp）：页面效果可以通过访问此页来观察 http://www.w3.org/TR/html4/loos
js：可输入可选择的select下拉框,可及时匹配包含输入的内容（兼容ie）
春夏秋冬
12-21 7604
js：可输入可选择的select下拉框,可及时匹配内容（兼容ie）
输入框输入文字字符匹配
weixin_30706691的博客
09-26 266
在输入框里输入文字，用一个下拉框显示与之匹配的文字提醒。JS方法示例如下： View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> ...
Javascript输入提示相匹配的内容
IT世纪网 - WEB开发者之家
05-25 429
<br />在你输入的时候，输入框下面会出现一些与你输入相匹配的内容，这是一个很人性化的设计，比如Google的搜索提示。JQuery可以比较方便地实现这个功能，但是为了用这个功能而加载很多js插件，这样效率明显下降了很多，而且这个东西平时也很常用，所以用原生JavaScript写一个。<br />下面程序完成有以下功能：输入字符会把以输入字符开头的提示出来。 支持上下方向键选择提示选项，支持循环。 支持绑定一个数组提示，支持ajax传递输入框值请求数据。 支持多个选择的dom元素一块绑定数据实现输入提示。
js在编辑框input下根据输入内容显示匹配内容的下拉列表
01-27
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏下拉div div的onmouseup 将选择的li内容设置到input 鼠标从Input移到下拉div并点击其中一个li的过程： onmousemove => onblur => onmousedown => onmouseup 这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown 现在解决办法有两个： 方案1： 触发Onmousemove时获取当前鼠标位置 在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div 方案2： 在触发onmousemove时设置标志 在触发onblur时判断标志，如果标志没有设置则隐藏下拉div 若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏 若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器
JS实现仿百度输入框自动匹配功能的示例代码
12-10
在本文中，我们将探讨如何使用JavaScript实现一个仿百度输入框的自动匹配功能。这个功能常见于许多网站，当用户在输入框中输入字符时，系统会动态显示与输入字符匹配的建议内容。以下是一个简单的静态示例代码，你...
基于javascript实现仿百度输入框自动匹配功能
11-22
总的来说，通过JavaScript实现的自动匹配功能能够极大地提升用户体验，使得用户在输入时能够快速找到想要的内容。结合AJAX，我们可以从服务器获取实时的匹配数据，从而提供更加智能和动态的输入建议。
input输入框的自动匹配(原生代码)
09-05
在前端开发中，输入框自动匹配功能常见于搜索框，能够根据用户输入的内容实时展示匹配的选项。本问题要求使用原生JavaScript来实现这一功能，不依赖任何框架。下面将详细阐述如何满足各项要求： 1. **纯JavaScript...
js输入框邮箱自动提示功能代码实现
12-08
【JavaScript邮箱自动提示功能实现详解】 在Web开发中，为了提升用户体验，经常需要实现一些智能提示功能，例如在用户输入邮箱时提供自动提示。这里我们将深入探讨如何使用JavaScript实现一个邮箱自动提示功能，该...
JavaScript：编码练习，输入首字母输入框自动联想以该字母开头的国家列表
kllo__的博客
02-18 502
问题描述 当用户在输入框中输入国家名称时，页面会显示相应国家的列表。单击建议的国家会替换输入框中的值。为简单起见，仅考虑以"A" 开头的国家。 HTML: <html> <head> </head> <body> <label for="country">Enter a country name</label>: <input type="text" id="country"> &lt...
前端下拉框能支持手动输入_下拉框（可输入+自动匹配）
weixin_39949506的博客
12-20 1068
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法：1.直接使用h5的新标签，对应demo如下：优点：节约js代码；缺点：IE 9及以下的IE浏览器 和 Safari 均不支持 标签(好像还有几个浏览器也不支持)；重复点击输入框或者下拉图标并不能收回下拉列表；样式难以控制2.使用基于jQuery的select2插件(需要同时引入select2.css和select2.js)，html部分代码...
你不一定知道但每天都一定用得到的：搜索自动匹配功能
wblearn的博客
10-29 3946
写在前面今天周六，我又来分享知识啦。最近一直在忙项目，所以趁着这个周末，喝着咖啡，听着音乐，敲着代码就把做项目的知识点总结给大家，简直不要太惬意，哈哈。先从我做的功能界面开始说起：本篇主要介绍的就是图中红框标记的搜索自动匹配功能。仔细想一想，有木有很熟悉，对，这功能其实就是跟你每天百度、谷歌这样的搜索功能一样。所以下面我会分享一些知识点并写个例子来实现这样的功能。每天都用到的搜索自动匹配功能 百
使用前端传来的文字进行精确匹配
啊猿的博客
12-09 579
使用前端传来的文字进行精确匹配 /** * 使用前端传来的文字进行精确匹配，替换指定字符 */ @GetMapping("/findByWords") public void selectOneByText(HttpServletResponse response,String text) throws IOException{ //替换搜索内容中制定的字符串 if(text != null && !"".equals(t
html搜索框输入自动匹配,jQuery搜索框关键字智能匹配代码实例
weixin_42187944的博客
06-02 670
[ jQuery ] 运行代码下载代码搜索框关键字智能匹配实例代码-51前端body, ul, li{margin:0;padding:0;}body {font-size:12px;font-family:sumsun, arial;background:#FFFFFF;}.gover_search {position:relative;z-index:99;height:63px;pa...
javascript正则
EmotionComputer
03-04 369
关于正则里详细内容请看我另一篇文章 传送门https://blog.csdn.net/yexudengzhidao/article/details/85453154 一. 使用 RegExp 对象 1. 使用 test() test() 方法是一个正则表达式方法。 test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。 2. ...
微信小程序仿手机淘宝新增地址自动识别地址，姓名，手机号
热门推荐
qq_22400315的博客
09-15 1万+
代码比较简单，直接上代码吧//自动识别事件 autoDiscern: function () { //省 var province = [“广东”, “北京”, “浙江”, “福建”, “湖北”, “上海”, “江苏”, “天津”, “河北”, “山西”, “内蒙古”, “辽宁”, “吉林”, “黑龙江”, “安徽”, “江西”, “山东”, “河南
js实现输入框不予两边输入空格
最新发布
09-08
### 回答1： 可以使用 JavaScript 的 `trim()` 函数来删除输入框两端的空格。 可以在输入框的 `onchange` 或 `onblur` 事件中调用这个函数，例如： ```js document.getElementById("inputId").addEventListener("blur", function() { this.value = this.value.trim(); }); ``` 或者在输入框的 `onkeyup` 事件中调用这个函数，例如： ```js document.getElementById("inputId").addEventListener("keyup", function() { this.value = this.value.trim(); }); ``` 这样就可以在用户输入或离开输入框时自动删除两端的空格。 ### 回答2： 在JS中实现输入框不允许两边输入空格的方法有多种途径。一种简单的方法是使用正则表达式，可以通过使用replace()函数来移除输入框中两边的空格。 下面是一个示例代码： ``` <input type="text" id="myInput" onblur="removeSpaces()"> <script> function removeSpaces() { var input = document.getElementById("myInput"); var inputValue = input.value; // 使用正则表达式替换两边的空格 var newValue = inputValue.replace(/^\s+|\s+$/g, ''); // 更新输入框的值 input.value = newValue; } </script> ``` 在上面的代码中，我们首先通过getElementById()函数获取输入框的引用，并将其值存储在inputValue变量中。然后，我们使用replace()函数以正则表达式/^\s+|\s+$/g来替换输入框值中的两边空格。其中，正则表达式中的^\s+表示输入字符串开头的一个或多个空格，\s+$表示输入字符串末尾的一个或多个空格，|表示或，g表示全局匹配。最后，我们更新输入框的值为新的值。 当输入框失去焦点时（onblur事件触发），removeSpaces()函数将被调用，从而将输入框中的两边空格移除。这样，用户在输入时就无法输入两边的空格了。 这只是一种简单的实现方式，实际上还有其他更复杂的方法来实现相同的功能，如使用trim()函数或使用正则表达式限制用户输入等。但上述方法已经能够满足移除输入框两边的空格的需求了。 ### 回答3： 在JavaScript中，我们可以通过使用正则表达式来实现输入框不允许两边输入空格。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>输入框不允许两边输入空格</title> <script> function validateInput() { var inputText = document.getElementById("input-text").value; var trimmedText = inputText.trim(); // 去除两边空格 if (inputText !== trimmedText) { alert("不允许输入两边有空格的内容！"); return false; } } </script> </head> <body> <h3>请输入内容：</h3> <input type="text" id="input-text"> <button onclick="validateInput()">提交</button> </body> </html> ``` 在这个示例中，我们使用`trim()`函数来去除输入框中的前导空格和尾部空格。然后，我们将去除空格后的文本与原始文本进行比较。如果两者不相等，说明输入框中包含两边有空格的内容，就会弹出警告提示。 通过以上代码，就实现了输入框不允许两边输入空格的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值