题解 | #智能提示#
智能提示
https://www.nowcoder.com/practice/efccf73b4ceb4446b6d71127f874e6d3
本题展示了一个简化版的搜索框智能提示功能，请按照如下要求完成suggest函数。
1、当输入框的值发生变化时，系统会调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组。
2、当items中的字符串和输入框的值匹配时，将匹配的数据依次渲染在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点
3、输入框的值需要移除两侧空白再进行匹配
4、输入框的值为空时，按照全部不匹配处理
5、字符串使用模糊匹配，比如"北大"能匹配"北大"和"北京大学"，但不能匹配"大北京"，即按照 /北.*?大.*?/ 这个正则进行匹配
6、通过在.js-suggest节点上添加/移除 hide 这个class来控制该节点的隐藏/显示
7、当前界面是执行 suggest(['不匹配数据', '根据输入框的值', '从给定字符串数组中筛选出匹配的数据，依次显示在li节点中', '如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点']) 后的结果
1、当输入框的值发生变化时，系统会调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组。
2、当items中的字符串和输入框的值匹配时，将匹配的数据依次渲染在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点
3、输入框的值需要移除两侧空白再进行匹配
4、输入框的值为空时，按照全部不匹配处理
5、字符串使用模糊匹配，比如"北大"能匹配"北大"和"北京大学"，但不能匹配"大北京"，即按照 /北.*?大.*?/ 这个正则进行匹配
6、通过在.js-suggest节点上添加/移除 hide 这个class来控制该节点的隐藏/显示
7、当前界面是执行 suggest(['不匹配数据', '根据输入框的值', '从给定字符串数组中筛选出匹配的数据，依次显示在li节点中', '如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点']) 后的结果
//输入中各种不能被识别的正则表达式的特殊字符，对特殊字符需要进行转义处理！！！
function suggest(items) {
var input = document.querySelector('.js-input');
var div = document.querySelector('.js-suggest');
var ul = document.querySelector('.js-suggest ul');
//去除输入字符串两端空白
var inputValue = input.value.trim();
ul.innerHTML = '';
// 输入框的值为空时，按照全部不匹配处理
if(!inputValue){
div.classList.add('hide');
}else{
//字符串和输入框的值匹配
var str = ''; // 正则表达式
var istrue = false;
if(/(\(|\)|\||\.|\?|\*|\+|\\|\[|\])/.test(inputValue.toString())){
Array.from(inputValue.toString()).forEach(el=>{
str += '\\'+ el+'.*?';
})
}else{
Array.from(inputValue.toString()).forEach(el=>{
str += el+'.*?';
})
}
items.forEach(item=>{
console.log(item.search(str))
if(item.search(str)!=-1){
istrue=true;
ul.innerHTML += `<li>${item}</li>`;
}
})
if(istrue){
console.log('suggest');
div.className='js-suggest';
}else{
console.log('hide');
div.classList.add('hide');
}
}
}
在线编程题解 文章被收录于专栏
web技术
