本文将介绍如何使用 JavaScript 实现一个列表搜索功能，该功能可以根据用户输入的字母，逐个字母地过滤列表选项，直到找到唯一匹配项。我们将通过修改现有的代码，利用 startsWith() 方法来实现这一功能，并讨论一些优化搜索算法的思路。
功能实现
原有的代码使用 indexOf() 方法来判断列表项是否包含输入的字符串，这导致只要列表项中包含输入的任何字母，就会被显示出来。为了实现字母递进式过滤，我们需要确保列表项以输入的字符串开头。 JavaScript 的 startsWith() 方法可以很好地满足这个需求。
下面是修改后的 JavaScript 代码：
function myFunction() { var value = document.getElementById("myInput").value.toUpperCase(); var myUL = document.getElementById("myUL"); for (var elem of myUL.getElementsByTagName("li")) { if (elem.innerText.toUpperCase().startsWith(value)) { elem.style.display = ""; } else { elem.style.display = "none"; } } }
代码解释：
- 获取输入值： document.getElementById(“myInput”).value.toUpperCase(); 获取输入框中的值，并将其转换为大写，以便进行不区分大小写的比较。
- 获取列表元素： document.getElementById(“myUL”); 获取无序列表的 ul 元素。
- 循环遍历列表项： for (var elem of myUL.getElementsByTagName(“li”)) 使用 for…of 循环遍历列表中的每个 li 元素。
- 检查是否以输入值开头： elem.innerText.toUpperCase().startsWith(value) 获取列表项的文本内容，将其转换为大写，并使用 startsWith() 方法检查它是否以输入值开头。
- 显示或隐藏列表项： 如果列表项以输入值开头，则将其 display 样式设置为 “”（显示）；否则，将其 display 样式设置为 “none”（隐藏）。
HTML 结构：
HTML 结构与原始代码保持一致：
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" /> <ul id="myUL"> <li><a href="#">Louisiana</a></li> <li><a href="#">Maine</a></li> <li><a href="#">Massachusetts</a></li> <li><a href="#">Michigan</a></li> <li><a href="#">Mississippi</a></li> <li><a href="#">Missouri</a></li> <li><a href="#">Montana</a></li> <li><a href="#">New Hampshire</a></li> </ul>
CSS 样式：
CSS 样式也与原始代码保持一致，用于美化搜索框和列表：
* { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; } #myUL li a:hover:not(.header) { background-color: #eee; }
优化建议
虽然上述代码实现了基本的功能，但它只是一个简单的搜索实现。对于更复杂的需求，可以考虑以下优化：
-
模糊搜索 (Fuzzy Search): 当前的实现是精确匹配，即必须以输入的字符串开头。 模糊搜索允许一定程度的拼写错误或不完全匹配。 可以研究 “Fuzzy search algorithm” 来实现更智能的搜索。常见的模糊搜索算法包括 Levenshtein 距离算法等。
-
性能优化： 对于大型列表，每次输入都重新遍历整个列表可能会影响性能。 可以考虑使用缓存来存储已经过滤的结果，或者使用更高效的数据结构（例如 Trie 树）来加速搜索。
-
用户体验： 可以添加一些用户体验方面的改进，例如：
- 高亮显示匹配的文本。
- 在没有匹配项时显示提示信息。
- 使用节流 (throttling) 或防抖 (debouncing) 来减少 myFunction() 的调用频率，避免频繁更新 UI。
总结
本文介绍了如何使用 JavaScript 和 startsWith() 方法实现一个基于字母递进式过滤的列表搜索功能。 通过修改原有的代码，我们可以轻松地实现更精确的搜索。 同时，也讨论了一些优化搜索算法的思路，以便在更复杂的场景下提供更好的用户体验。记住，这只是一个基础的实现，根据实际需求，你可能需要采用更高级的搜索算法和技术。
评论（已关闭）
评论已关闭