`

js自动完成

阅读更多
 <style>
        #showUser5 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser1 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser2 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser3 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser4 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser6 table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        #showUser5 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #showUser1 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #showUser2 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #showUser3 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #showUser4 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #showUser6 table {
            width: 200px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }
    </style>


   <script type="text/javascript" charset="utf-8">
        var source = "";
        var inputValue = "";
        function initialize() {
            //source = '{"ProjectId":"28081","PROJECTNAME":"广州正佳广场"}';
            source = "";
            elemCSS = { focus: { 'color': 'black', 'background': '#ccc' }, blur: { 'color': 'black', 'background': 'transparent' } };

            inputUse = document.getElementById("txtlc1");
            showUse = document.getElementById("showUser");

            var bodyDiv = document.getElementById("bodyDiv");

            showUse.style.display = "none";
            inputUse.style.width = bodyDiv.style.width;
            showUse.style.width = bodyDiv.style.width;

            inputValue = inputUse.defaultValue;
        }

        function inputFocus() {
            //调用setInterval()函数每200ms刷新一次    
            this.timer = setInterval(function () {
                if (inputUse.value != '') {
                    //检查文本框的当前值与以前的值是否有变化
                    var NowInpuValue = inputUse.value;
                    if (NowInpuValue != inputValue) {
                        //如果文本框当前值与之前的值不同,记录当前值,已被下次调用时使用
                        inputValue = NowInpuValue;
                        //清除上次调用显示的结果
                        showUse.innerHTML = '';
                        if (inputValue != '') {
                            //定义JS的RegExp对象,查询以inputValue开头的数据
                            quickExpr = RegExp('^' + inputValue);
                            //如果数据源不为空,则调用match函数开始匹配数据
                            //此处如果通过ajax取数据,则适当修改数据源即可

                            //GetSource(inputValue);

                            //if (source) {
                            //    match(quickExpr, inputValue, source);
                            //}

                            match(quickExpr, inputValue, source,'');
                        }
                    }
                }
                else {
                    inputValue = inputUse.value;
                    showUse.innerHTML = '';
                    showUse.style.display = "none";
                }
            }, 200)
        }

        //通过Ajax获取数据源
        function GetSource(value,e) {
            jQuery.ajax({
                url: '../ax/AjaxShopGetBrandNameHandler.ashx',
                type: 'GET', //GET
                async: true,    //或false,是否异步
                data: {
                    BrandName: encodeURI(encodeURI(value)), type: 'pp'
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式:json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                    //console.log(xhr)
                    //console.log('发送前')
                },
                success: function (data, textStatus, jqXHR) {
                    if (data != "") {
                        //source = data;
                        var dataJson = JSON.stringify(data);
                        var jsonInfo = JSON.parse(dataJson);


                        source = jsonInfo;
                        //当为字体连打的时候,按下空格键触发事件
                        if(e==32)
                        {
                            showUse.innerHTML = '';
   
                            var table = null;
                            var tr = null;
                            var td = null;

                            //创建table标签
                            table = document.createElement('table');
                            table.id = 'selector';
                            table.style.width = '100%';

                            for (var o in source) {

                                //创建tr标签
                                tr = document.createElement('tr');
                                //创建td标签
                                td = document.createElement('td');
                                //在td中插入<a href="javascript:void(null);"><span>数据项</span></a>
                                td.innerHTML = '<a href="javascript:void(null);">' + source[o].BrandName + "," + source[o].BrandId + '</a>';
                                //appendChild()在指定元素的最后一个子节点后添加节点   
                                tr.appendChild(td);
                                table.appendChild(tr);
                                showUse.appendChild(table);
                            }
                        }


                    } else {
                        data = "";
                    }
                    //console.log(data)
                    //console.log(textStatus)
                    //console.log(jqXHR)

                },
                error: function (xhr, textStatus) {
                    //console.log('错误')
                    //console.log(xhr)
                    //console.log(textStatus)
                },
                complete: function () {
                    //console.log('结束')
                }
            })
        }

        function match(quickExpr, value, source,e) {
            var table = null;
            var tr = null;
            var td = null;

            //创建table标签
            table = document.createElement('table');
            table.id = 'selector';
            table.style.width = '100%';
            //开始遍历数组

            //var arrSource = source;
            GetSource(value,e);


            for (var o in source) {

                //创建tr标签
                tr = document.createElement('tr');
                //创建td标签
                td = document.createElement('td');
                //在td中插入<a href="javascript:void(null);"><span>数据项</span></a>
                td.innerHTML = '<a href="javascript:void(null);">' + source[o].BrandName + "," + source[o].BrandId + '</a>';
                //appendChild()在指定元素的最后一个子节点后添加节点   
                tr.appendChild(td);
                table.appendChild(tr);
                showUse.appendChild(table);
            }

            //检验table下面的a标签的数量,以此确定是否将“提示”列表显示
            if (showUse.getElementsByTagName('a').length) {
                showUse.style.display = "";
            } else {
                showUse.style.display = "none";
            }
        }

        function InputKeyUp(event)
        {
            event = event || window.event;

            if(event.keyCode == 32)
            {
                if (inputUse.value != '') {
                    //检查文本框的当前值与以前的值是否有变化
                    var NowInpuValue = inputUse.value;

                    //如果文本框当前值与之前的值不同,记录当前值,已被下次调用时使用
                    inputValue = NowInpuValue;
                    //清除上次调用显示的结果
                    showUse.innerHTML = '';
                    if (inputValue != '') {
                        //定义JS的RegExp对象,查询以inputValue开头的数据
                        quickExpr = RegExp('^' + inputValue);
                        //如果数据源不为空,则调用match函数开始匹配数据
                        //此处如果通过ajax取数据,则适当修改数据源即可

                        //GetSource(inputValue);

                        //if (source) {
                        //    match(quickExpr, inputValue, source);
                        //}

                        match(quickExpr, inputValue, source,event.keyCode);
                    }

                }
                else {
                    inputValue = inputUse.value;
                    showUse.innerHTML = '';
                    showUse.style.display = "none";
                }
            }
        }

        function inputKeydown(event) {
            //e.keyCode == 13 空格
            //兼容IE 
            event = event || window.event;
            //空格键
            if(event.keyCode == 32)
            {
                if (inputUse.value != '') {
                    //检查文本框的当前值与以前的值是否有变化
                    var NowInpuValue = inputUse.value;

                    //如果文本框当前值与之前的值不同,记录当前值,已被下次调用时使用
                    inputValue = NowInpuValue;
                    //清除上次调用显示的结果
                    showUse.innerHTML = '';
                    if (inputValue != '') {
                        //定义JS的RegExp对象,查询以inputValue开头的数据
                        quickExpr = RegExp('^' + inputValue);
                        //如果数据源不为空,则调用match函数开始匹配数据
                        //此处如果通过ajax取数据,则适当修改数据源即可

                        //GetSource(inputValue);

                        //if (source) {
                        //    match(quickExpr, inputValue, source);
                        //}

                        match(quickExpr, inputValue, source,'');
                    }

                }
                else {
                    inputValue = inputUse.value;
                    showUse.innerHTML = '';
                    showUse.style.display = "none";
                }
            }
           //如果按了down键          
            else  if (event.keyCode == 40) {
                //如果“提示”列表已经显示,则把焦点切换到列表中的第一个数据项上
                if (showUse.style.display == "") {
                    showUse.getElementsByTagName('a')[0].focus();
                } else {   //如果“提示”列表未显示,则把焦点依旧留在文本框中
                    inputUse.focus();
                }
            }
                //如果按了up键
            else if (event.keyCode == 38) {
                //如果“提示”列表已经显示,则把焦点切换到列表中的最后一个数据项上
                if (showUse.style.display == "") {
                    showUse.getElementsByTagName('a')[showUse.getElementsByTagName('a').length - 1].focus();
                } else {     //如果“提示”列表未显示,则把焦点依旧留在文本框中
                    inputUse.focus();
                }
            }
                //如果按了tab键,此时的情况与“百度首页”的处理情况一样
            else if (event.keyCode == 9) {
                showUse.innerHTML = '';
                showUse.style.display = "none";
            }
            
        }

        function inputBlur() {
            //由于焦点已经离开了文本框,则取消setInterval
            clearInterval(this.timer);
            //记住当前有焦点的选项 
            var current = 0;
            //当前table下面的a标签的个数
            var aArray = showUse.getElementsByTagName('a');
            var len = aArray.length - 1;
            var select = document.getElementById("selector");


            //定义“选项”的onclick事件   
            var aClick = function () {
                //由于“选项”上触发了click事件,this就是指a标签,则把a标签包含的数据赋值给文本框
                inputUse.value = this.childNodes[0].data;
                //将文本框的当前值更新到记录以前值的变量中
                inputValue = inputUse.value;
                //由于上面已经选出合适的数据项,则清空table下的内容,并关闭“提示”列表
                showUse.innerHTML = '';
                showUse.style.display = 'none';
                //将焦点移回文本框
                inputUse.focus();
            };

            //定义“选项”的onfocus事件 
            var aFocus = function () {
                for (var i = len; i >= 0; i--) {
                    //this是a,this.parentNode是td,select.children[i].children[0]是table.tr.td
                    if (this.parentNode === select.childNodes[i].childNodes[0]) {
                        //如果是同一个td,则将current的值置为焦点所在位置的值
                        current = i;
                        break;
                    }
                }
                //添加有焦点的效果
                for (var k in elemCSS.focus) {
                    this.style[k] = elemCSS.focus[k];
                }
            };

            //定义“选项”的onblur事件
            var aBlur = function () {
                //添加无焦点的效果 
                for (var k in elemCSS.blur)
                    this.style[k] = elemCSS.blur[k];
            };

            //定义“选项”的onKeydown是事件   
            var aKeydown = function (event) {
                //兼容IE 
                event = event || window.event;

                //如果在选择数据项时按了tab键,此时的情况与“百度首页”的处理情况一样
                if (event.keyCode === 9) {
                    showUse.innerHTML = '';
                    showUse.style.display = 'none';
                    inputUse.focus();
                }
                    //如果按了down键
                else if (event.keyCode == 40) {
                    //向下移动,准备移动焦点                
                    current++;
                    //如果当前焦点在最后一个数据项上,用户用按了down键,则循环向上,回到文本框上
                    if (current > len) {
                        current = -1;
                        inputUse.focus();
                    } else {
                        select.getElementsByTagName('a')[current].focus();
                    }
                }
                    //如果按了up键
                else if (event.keyCode == 38) {
                    //向上移动,准备移动焦点
                    current--;
                    //如果当前焦点在文本框上,用户用按了up键,则循环向下,回到最后一个数据项上
                    if (current < 0) {
                        inputUse.focus();
                    } else {
                        select.getElementsByTagName('a')[current].focus();
                    }
                }
            };

            //将“选项”的事件与相应的处理函数绑定    
            for (var i = 0; i < aArray.length; i++) {
                aArray[i].onclick = aClick;
                aArray[i].onfocus = aFocus;
                aArray[i].onblur = aBlur;
                aArray[i].onkeydown = aKeydown;
            }
        }
    </script>




                             
      <div id="bodyDiv" name="bodyDiv" style="position: relative; border-top: 0px; margin-top: 0; width: 160px">
                                        <!--<span style="color:red;font-size:5px;">*补全功能默认开启</span>-->
                                        <input type="text" id="txtlc1" name="txtlc1" value="<%=txtstrlc1 %>" placeholder="品牌名称1" style="height: 30px" onfocus="inputFocus()" onkeydown="inputKeydown(event)" onblur="inputBlur()" onkeyup="InputKeyUp(event)" />
                                        <div id="showUser" name="showUser">
                                            <!-- 此处添加搜索数据的结果,使用的是table标签 -->
                                        </div>
                                    </div>
分享到:
评论

相关推荐

    基于JS自动完成容易使用

    1. **JavaScript自动完成**:JavaScript库如jQuery UI、Typeahead.js或Autocomplete.js提供了实现自动完成的基础。这些库通常包括一个输入框监听器,当用户输入时触发请求,并显示返回的建议列表。 2. **PHP接口...

    JS自动完成(JQuery做的)

    `44444.html`可能是示例页面,`jquery-1.3.2.js`是jQuery库的旧版本,而`bb.js`可能是包含自动完成逻辑的JavaScript脚本。 综上所述,利用jQuery实现自动完成功能,主要涉及到Ajax通信、CSS布局以及jQuery的事件...

    JS 自动完成,支持拼音中文插件

    实现JS自动完成功能,我们可以利用jQuery库,这是一个轻量级、高性能的JavaScript库,提供了许多方便的DOM操作和事件处理方法。jQuery使得在不同浏览器间编写兼容的代码变得更加容易。 在JS中实现中文拼音自动完成...

    JavaScript_一个超级小的Javascript自动完成自动建议库零依赖800字节的mingzip.zip

    本文将深入探讨标题所提及的"一个超级小的JavaScript自动完成自动建议库",以及与JavaScript相关的知识点。 标题中的“零依赖800字节的mingzip.zip”可能指的是一个极小型的JavaScript库,专门用于实现自动完成和...

    react-native-autocomplete-input, 纯javascript自动完成输入,用于响应本机.zip

    react-native-autocomplete-input, 纯javascript自动完成输入,用于响应本机 react-native-autocomplete-input 一个纯JS自动完成组件,用于响应本机。 在你自己的项目中使用这里组件,或者将它的用作生成你自己的...

    DIY的JS自动完成的插件

    最近又花了点时间写了个在一般项目中比较常用的插件,就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据,支持能过配置的自定义处观位置与大小的调整;自定义事件触发;自定义请求...

    纯js仿百度自动完成

    面向对象的纯js仿百度自动完成,可以在一个页面内通过创建对象使用多个

    javascript 仿照google自动完成

    通过以上技术,我们可以实现一个功能完善的JavaScript自动完成组件。具体实现过程通常包括创建输入事件监听器,获取输入值,匹配数据源,创建并插入DOM元素,以及处理用户与下拉列表的交互。在实际项目中,可以使用...

    JavaScript自动完成库AutoJS.zip

    AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的,没有任务外部依赖,大小仅仅 6kb。 标签:AutoJS

    实用的轻量级js自动完成autocomplete插件

    在JavaScript的世界里,开发人员经常面临为用户输入提供智能提示或自动补全功能的需求,而 Awesomplete 就是一个非常出色的解决方案。这款轻量级的 autocomplete 插件以其高效和灵活的特性赢得了开发者们的喜爱。...

    自动完成 JS

    【自动完成 JS】技术是前端开发中的重要组成部分,主要用于提高用户输入效率和用户体验。它广泛应用于搜索框、表单输入、代码编辑器等场景,通过预测和建议用户可能要输入的内容,大大减少了用户手动键入的步骤。在...

    EDITPLUS 自动完成JS插件

    "EDITPLUS 自动完成JS插件"是专门为EDITPLUS设计的一个增强工具,用于提升JavaScript开发时的代码编写效率。 该插件的核心特性是自动完成功能,它可以在用户输入代码时提供智能提示,根据上下文显示可能的函数、...

    仿baidu google 输入框自动完成

    【描述】中的"js自动完成",指的是利用JavaScript编程语言实现自动补全功能。"struct1.2+mysql"表明项目中可能使用了Structs 1.2框架和MySQL数据库来处理数据存储和检索。Structs是一个基于MVC模式的Java Web开发...

    js 自动提示城市

    在“js自动完成城市提示输入”中,核心是监听用户的输入事件,每当用户在输入框中输入字符时,都会触发一个事件。我们可以捕获这个事件,并利用拼音库将用户输入的汉字转换为拼音。然后,我们可以在预先存储的城市...

    JS 自动完成 AutoComplete(Ajax 查询)

    【JS 自动完成 AutoComplete(Ajax 查询)】是前端开发中常见的一种功能,它通过实时获取用户在输入框中输入的字符,利用Ajax技术向服务器发送请求,动态加载并显示匹配的数据,为用户提供便捷的搜索体验。这个功能在...

    js javascript自动编号 编号递增

    在JavaScript编程中,"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能,使得能够自动为带有特定前缀(例如"0X")的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...

    atom-autocomplete-threejs:用于Atom编辑器的three.js自动完成

    《Atom编辑器中的Three.js自动完成插件:atom-autocomplete-threejs详解》 在现代Web开发中,JavaScript库和框架的使用越来越广泛,其中Three.js是3D网页开发的首选库之一。为了提高开发效率,许多开发者依赖于代码...

    EDITPLUS 自动完成插件 (JS 含jQuery API)

    总的来说,EDITPLUS的自动完成插件(JS含jQuery API)是一个高效且实用的工具,它能够帮助开发者快速编写JavaScript和jQuery代码,提高开发速度和代码质量。无论是初学者还是经验丰富的专业人士,都能从中受益。通过...

    自动完成JS

    标题“自动完成JS”指的是在JavaScript中实现自动补全或自动建议的功能,这通常用于提升用户在输入框中输入内容时的效率和体验。在Web开发中,这种功能广泛应用于搜索框、表单填写等场景,它能预测并提供用户可能想...

Global site tag (gtag.js) - Google Analytics