js自动完成 javascriptajaxjsonhtmlcss

 <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>