FED87. 智能提示
描述
本题展示了一个简化版的搜索框智能提示功能，请按照如下要求完成suggest函数。HTML/CSS/JavaScript 解法, 执行用时: 958ms, 内存消耗: 77936KB, 提交时间: 2021-06-24
{"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-10
{"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":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1024ms, 内存消耗: 77868KB, 提交时间: 2021-07-11
{"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 var value = document.querySelector('.js-input').value.trim();\n var match = [];\n var container = document.querySelector('.js-suggest');\n var ul = container.getElementsByTagName('ul')[0];\n var isMatch = false;\n var lis = [];\n if (value !== '') {\n var words = value.split('');\n words = words.map(escapeRegExp);\n var reg = new RegExp(words.join('.*?'));\n for (var i = 0; i < items.length; i++) {\n if (reg.test(items[i])) {\n var li = document.createElement('li');\n li.textContent = items[i];\n lis.push(li);\n isMatch = true;\n }\n } \n }\n ul.innerHTML = '';\n if (!isMatch) {\n ;\n container.classList.add('hide');\n } else {\n for (var i = 0; i < lis.length; i++) {\n ul.appendChild(lis[i]);\n }\n container.classList.remove('hide');\n }\n}\nfunction escapeRegExp(string) {\n return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\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 解法, 执行用时: 1034ms, 内存消耗: 78996KB, 提交时间: 2021-05-30
{"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 ipt = document.querySelector('.js-input').value;\n let dv = document.querySelector('.js-suggest');\n let ul = document.querySelector('ul');\n let len = ul.children.length;\n // console.log('len', len);\n\n for (let i = 0; i < len; i++) {\n let li = document.querySelector('li');\n ul.removeChild(li);\n }\n // console.log(ul.children.length);\n \n // ipt = ipt.replace(/(^\\s*)|(\\s*$)/, '');\n ipt = ipt.trim();\n // dv.removeChild(ul);\n // ul = document.createElement('ul');\n if (!ipt) {\n dv.classList.add('hide');\n return;\n }\n\n // 构造reg的时候，ipt如果是特殊字符，要转义\n let reg = '';\n const regKey = ['(', ')', '.', '?', '^', '/', '\\\\', '*', '[', ']', '|', '+', '{', '}', '$'];\n console.log(regKey.length);\n for (i of ipt) {\n if (regKey.includes(i)) {\n i = '\\\\' + i;\n }\n reg += i +'.*?';\n }\n console.log(reg);\n reg = new RegExp(reg);\n\n for (i of items) {\n if (reg.test(i)) {\n let tip = document.createElement('li');\n tip.innerHTML = i;\n console.log('li innerHTML', tip.innerHTML);\n ul.appendChild(tip);\n }\n }\n dv.appendChild(ul);\n // console.log('ul', ul);\n\n // ipt不为空但是没有匹配到\n if (ul.children.length){\n dv.classList.remove('hide');\n } else {\n dv.classList.add('hide');\n }\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 解法, 执行用时: 1035ms, 内存消耗: 80068KB, 提交时间: 2021-07-19
{"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 value = document.querySelector('.js-input').value.trim()\n const sDom = document.querySelector('.js-suggest')\n const ulDom = sDom.querySelector('ul')\n let list = value\n ? items.filter((str) => {\n return new RegExp(\n value\n .split('')\n .map((s) => {\n return (\n (['(', ')','[',']','.', '*', '+', '?'].includes(s) ? '\\\\' : '') +\n s +\n '.*?'\n )\n })\n .join(''),\n 'g'\n ).test(str)\n })\n : []\n if (list && list.length) {\n sDom.classList.remove('hide')\n ulDom.innerHTML = list.map((str) => '<li>' + str + '</li>').join('')\n } else {\n ulDom.innerHTML = ''\n sDom.classList.add('hide')\n }\n }\n document.querySelector('.js-input').value = '的'\n suggest([\n '不匹配数据',\n '根据输入框的值',\n '从给定字符串数组中筛选出匹配的数据，依次显示在li节点中',\n '如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点',\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":[]}