vue 实现 input存储最多10个的输入值

君不见
  • 12

clipboard.png
类似于思否的这种输入框效果。 我试过原生的autocomplete 属性 不起作用。### 问题描述

回复
阅读 2.8k
4 个回答
jockchen
  • 205
✓ 已被采纳

实现功能,只有点击搜索以后的搜索条件保存,只展示10条;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorege</title>
</head>
<body>
    <input id="box-input" type="text" />
    <button id="btn">search</button>
    <div id="search-list"></div>
</body>
<script type="text/javascript">
    window.onload = function(){
        localStorage.clear();
        var vla = document.getElementById("box-input"),
            btn = document.getElementById("btn"),
            searchList = document.getElementById("search-list");
        btn.onclick = function(){
            var result = [];
            var isResult = JSON.parse(localStorage.getItem("resultArr"));
            if(!!isResult){
                result = result.concat(isResult)
            };
            if(!!vla.value){
                result.unshift(vla.value);
            };
            localStorage.setItem("resultArr", JSON.stringify(result))
        };
        vla.onfocus = function(){
            var isResult = JSON.parse(localStorage.getItem("resultArr"));
            if(!!isResult){
                var max = "";
                if(isResult.length>9){
                    max = 10
                }else{
                    max = isResult.length
                };
                for (var i=0; i<max; i++){
                    var p = document.createElement("p");
                    p.innerHTML = isResult[i]
                    searchList.appendChild(p)
                }
            }
        };
        vla.onblur = function(){
            var childs = searchList.childNodes;
            for(var i = childs .length - 1; i >= 0; i--) {
                searchList.removeChild(childs[i]);
            }
        }
    }
</script>
</html>

检查 input 是否有加 name

不妨自己写一个,每次搜索都往本地存一下,还兼容各大浏览器

宣传栏