master

分支 (1)

管理

管理

master

search_lian
/
index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    </style>
</head>
<body>
<input type="text">
<ul></ul>
</body>
<script src="node_modules/mockjs/dist/mock.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script>
    let arr;
    Mock.mock('http://www.123.com', 'get', () => {
        return Mock.mock({
            'name|99': ['@cname'],
        });
    });
    axios.get('http://www.123.com')
        .then((data) => {
            console.log(data);
            // arr = data.data.name
            arr = ['ab','cd','er','gh','兄果然', '我城市', '我正游戏','新奇', '打打', '打热门']
            let input = document.getElementsByTagName('input')[0];
            let ul = document.getElementsByTagName('ul')[0];
            input.addEventListener('input', function(event){
                var _value = event.target.value.trim()

                if(_value){

                    autoComplete(_value, arr)
                }

                else{

                    ul.innerHTML = ''
                }

            })


            function autoComplete(str, arr){

                var lis = []

                arr.forEach( (word)=>{

                    if(word.startsWith(str)){

                        lis.push('<li>' + word + '</li>')
                    }
                })

                ul.innerHTML = lis.join('')
            }

            function addToInput(li){

                var _txt = li.innerText

                input.value = _txt
            }

            ul.addEventListener('click', function(event){

                if(event.target.tagName.toLowerCase() === 'li'){

                    addToInput(event.target)
                }
            })
        })
        .catch(error => {
            console.log(error);
        })
    console.log(arr);

</script>
</html>