gpt4 book ai didi

Javascript搜索并显示具有匹配关键字的div

转载 作者:太空狗 更新时间:2023-10-29 15:08:14 27 4
gpt4 key购买 nike

我在找什么:

我正在努力为用户创建一种简单的方法来搜索人员列表,并使结果立即显示在搜索字段下方。结果必须显示“接近”的结果,而不是精确的。例如:用户搜索“Mr. Smith”并显示以下现有结果:“John Smith”(由于没有“Mr. Smith”条目,因此显示了带有关键字“smith”的结果)

我有什么:

我有一个工作代码,允许用户输入一些字符,并显示包含与输入匹配的字符串的所有 div(请参阅 jsfiddle:http://jsfiddle.net/891nvajb/5/ 代码也在下面)不幸的是,这只会显示完全匹配的结果。

<body>
<input type="text" id="edit_search" onkeyup="javascript: find_my_div();">
<input type="button" onClick="javascript: find_my_div();" value="Find">

<script>

function gid(a_id) {
return document.getElementById (a_id) ;
}

function close_all(){

for (i=0;i<999; i++) {
var o = gid("user_"+i);
if (o) {
o.style.display = "none";
}
}

}


function find_my_div(){
close_all();

var o_edit = gid("edit_search");
var str_needle = edit_search.value;
str_needle = str_needle.toUpperCase();

if (str_needle != "") {
for (i=0;i<999; i++) {
var o = gid("user_"+i);
if (o) {

var str_haystack = o.innerHTML.toUpperCase();
if (str_haystack.indexOf(str_needle) ==-1) {
// not found, do nothing
}
else{
o.style.display = "block";
}
}
}
}

}
</script>

<div id="user_0" style="display:none">Andy Daulton<br/>Owner Nissan<br/><br/></div>
<div id="user_1" style="display:none">Doug Guy<br/>Bug Collector<br/><br/></div>
<div id="user_2" style="display:none">Sam Hilton<br/>Famous Celebrity in Hollywood<br/><br/></div>
<div id="user_3" style="display:none">Don Grey<br/>Old man<br/><br/></div>
<div id="user_4" style="display:none">Amy Hinterly<br/>Cook<br/><br/></div>
<div id="user_5" style="display:none">Gary Doll<br/>Racecar Driver<br/><br/></div>
<div id="user_6" style="display:none">Tod Akers<br/>Football Player<br/><br/></div>
<div id="user_7" style="display:none">Greg Barkley<br/>Interior designer<br/><br/></div>
<div id="user_8" style="display:none">Alen Simmons<br/>8th place winner<br/><br/></div>

最佳答案

用正则表达式拆分搜索字符串中的单词

searchString.split(/\W/);

并对结果数组中的每个单词执行 OR 搜索。

已更新 fiddle

var searchStrings = str_needle.split(/\W/);

for (var i = 0, len = searchStrings.length; i < len; i++) {
var currentSearch = searchStrings[i].toUpperCase();
if (currentSearch !== "") {
nameDivs = document.getElementsByClassName("name");
for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) {
if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) {
nameDivs[j].style.display = "block";
}
}
}
}

关于Javascript搜索并显示具有匹配关键字的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26493665/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com