BD17. 智能提示
描述
本题展示了一个简化版的搜索框智能提示功能，请按照如下要求完成suggest函数。HTML/CSS/JavaScript 解法, 执行用时: 958ms, 内存消耗: 77936KB, 提交时间: 2021-06-23
{"css":".search{\n position: relative;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 8px;\n border: 1px solid #cccccc;\n outline: none;\n}\n.js-suggest{\n width: 466px;\n font-size: 14px;\n border: 1px solid #cccccc;\n background: #ffffff;\n position: absolute;\n left: 0;\n top: 39px;\n}\n.js-suggest.hide{\n display: none;\n}\n.js-suggest ul{\n display: block;\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.js-suggest ul li{\n color: #000;\n font: 14px arial;\n line-height: 25px;\n padding: 0 8px;\n position: relative;\n cursor: default;\n}\n.js-suggest ul li:hover{\n background: #f0f0f0;\n}","js":"function suggest(items) {\n // console.log(items)\n var val = document.querySelector('.js-input').value.trim();\n // /北.*?大.*?/ \n var regexp = new RegExp(val.split('').map(v=>`${safeFilter(v)}.*?`).join(''))\n // var items = items.filter(v=> val!='' && v.indexOf(val) != -1)\n var items = items.filter(v=> val!='' && regexp.test(v))\n document.querySelector('.js-suggest').classList[items.length?'remove':'add']('hide')\n document.querySelector('.js-suggest').children[0].innerHTML = `\n ${items.map(v=>`<li>${v}</li>`)}\n `\n}\nfunction safeFilter(str){\n return '()[]+?*'.indexOf(str)!=-1?`\\\\${str}`:str\n}","html":"<div class=\"search\">\n <div><input type=\"text\" class=\"js-input\" value=\"的\"></div>\n <div class=\"js-suggest\">\n <ul>\n <li>根据输入框的值</li>\n <li>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中</li>\n <li>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点</li>\n </ul>\n </div>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 990ms, 内存消耗: 77912KB, 提交时间: 2021-07-09
{"css":".search{\n position: relative;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 8px;\n border: 1px solid #cccccc;\n outline: none;\n}\n.js-suggest{\n width: 466px;\n font-size: 14px;\n border: 1px solid #cccccc;\n background: #ffffff;\n position: absolute;\n left: 0;\n top: 39px;\n}\n.js-suggest.hide{\n display: none;\n}\n.js-suggest ul{\n display: block;\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.js-suggest ul li{\n color: #000;\n font: 14px arial;\n line-height: 25px;\n padding: 0 8px;\n position: relative;\n cursor: default;\n}\n.js-suggest ul li:hover{\n background: #f0f0f0;\n}","js":"function suggest(items) {\n let input = document.querySelector('.js-input').value.trim();\n let div = document.querySelector('.js-suggest');\n let ul = document.querySelector('ul');\n ul.innerHTML = ''\n var inputArr = input.split(\"\")\n if (!input) div.classList.add('hide')\n let arr = items.slice(0)\n arr.forEach((item, index) => {\n var flag = inputArr.length < 1 ? false : true\n inputArr.forEach(i => {\n if (item.indexOf(i) !== -1) {\n item = item.slice(item.indexOf(i)+1)\n flag = flag && true\n } else {\n flag = flag && false\n }\n console.log(flag)\n })\n if (flag) {\n let tip = document.createElement('li')\n tip.innerText = items[index]\n ul.appendChild(tip)\n }\n })\n div.appendChild(ul)\n ul.children.length ? div.classList.remove('hide') : div.classList.add('hide');\n}","html":"<div class=\"search\">\n <div><input type=\"text\" class=\"js-input\" value=\"的\"></div>\n <div class=\"js-suggest\">\n <ul>\n <li>根据输入框的值</li>\n <li>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中</li>\n <li>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点</li>\n </ul>\n </div>\n</div>","libs":[]}