模拟百度输入框的效果-前端ABC

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度搜索框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 400px;
            margin: 200px auto;
            /*border: 1px solid #000;*/
        }

        #txtSearch {
            width: 300px;
        }

        #pop {
            width: 300px;
            border: 1px solid red;
            padding: 0px;
        }

        #pop ul {
            list-style-type: none;
            margin: 5px;
            padding: 0px;
        }

    </style>
</head>
<body>
<div id="box">
    <input type="text" value="" id="txtSearch"/>
    <input type="button" value="搜索" id="btnSearch"/>
    <!--<div id="pop">
        <ul>
            <li>a</li>
            <li>ab</li>
            <li>abc</li>
            <li>abcd</li>
            <li>abcde</li>
            <li>amm</li>
        </ul>-
    </div>-->
</div>
</body>
</html>
<script>

//与获取文本或是设置文本相关的对象
var Txt = {
    getText: function (ele) {
        if (typeof ele.innerText == "string") {
            return ele.innerText;//将获取的文本内容返回
        } else {
            return ele.textContent;
        }
    },
    setText: function (ele, value) {
        // 能力检测：就是要看当前的浏览器是否支持此对象的属性或是方法
        if (typeof ele.innerText == "string") {
            ele.innerText = value;
        } else { // textContent
            ele.textContent = value;
        }
    }
}

    // 当我们在输入框中键盘按下，并抬起的时候，就会向服务器发送一条ajax请求,去服务器的
    //数据库中查询以用户输入的内容为开头的数据，如果找到了，则将这些数据返回给浏览器，渲染到指定的位置

    // 用本地数组模拟一下数据库
    var strs =["a","ab","abc","abcd","abcde","acc","amm","mmm","kkk"];

    // 1. 键盘按下并抬起的时候，获得用户输入的数据
    // 2. 拿着用户输入的数据，去数据库搜索以用户输入的内容为开头的数据
    // 3. 找到以用户输入的内容为开头的数据，存入新的容器中
    // 4. 根据匹配到的数据(根据新数组的长度，来动态的生成列表中的li)，动态的生成列表
    // 5. 判断特殊情况

    var txtSearch=document.getElementById('txtSearch');
    var box=document.getElementById('box');

    txtSearch.onkeyup=function(){
        var value=txtSearch.value;

//       过滤
        var filter=[];
        for(var i=0;i<strs.length;i++){
            if(strs[i].indexOf(value)==0){
                filter.push(strs[i]);
            }
        }
//        判断有没有pop盒子，有就先清除掉，再创建
        var pop=document.getElementById('pop');
        if(pop){
            box.removeChild(pop);
        }
        if(!filter.length){
            return;
        }
        if(!value){
            return;
        }

//        动态创建
        pop=document.createElement('div');
        pop.setAttribute('id','pop');
        var ul=document.createElement('ul');
        pop.appendChild(ul);
        box.appendChild(pop);

//        动态创建li
        for(var j=0;j<filter.length;j++){
            var li=document.createElement('li');
            Txt.setText(li,filter[j]);
            ul.appendChild(li);

            li.onmouseover=function(){
                this.style.backgroundColor='#c0c0c0';
            }
            li.onmouseout=function(){
                this.style.backgroundColor='#fff';
            }
            li.onclick=function(){
                txtSearch.value=Txt.getText(this);
                this.parentNode.parentNode.style.display='none';
            }
        }

    }

</script>
欢迎分享本文，转载请保留出处：前端ABC » 模拟百度输入框的效果
模拟百度输入框的效果

相关推荐

发表评论 0
