Javascript搜索和显示与关键字匹配的div [英] Javascript search and display divs with matching keywords
问题描述
我在寻找的是什么：
我正在为用户创建一个简单的方法来搜索人员列表，并为结果立即显示在搜索字段下方。结果必须显示关闭结果，而不是确切的。例如：用户搜索Mr. Smith并显示以下现有结果：John Smith（因为没有Mr. Smith条目，它显示一个关键字为smith）
我有什么：
我有一个工作代码，可以让用户输入一些字符和所有包含匹配输入显示（请参阅jsfiddle： http://jsfiddle.net/891nvajb/5/ 代码是也就是下面）
不幸的是，这只显示匹配的结果。
$ b
< body> < input type =textid =edit_searchonkeyup =javascript：find_my_div（）;> < input type =buttononClick =javascript：find_my_div（）;值= 查找 > < 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; }}}函数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）;如果（o）{var str_haystack = o.innerHTML.toUpperCase（）; if（str_haystack.indexOf（str_needle）== - 1）{//未找到，不做任何事} else {o.style.display =block; }}}}}< / script> < div id =user_0style =display：none> Andy Daulton< br /> Owner Nissan< br />< style =display：none> Doug Guy< br /> Bug Collector< br />< br />< / div>< div id =user_2style =display：none> ; Sam Hilton< br>>>< br>>< br />< / div>< div id =user_3style =display：none> Don Gray< br / >老人< br />< br />< / div>< div id =user_4style =display：none> Amy Hinterly< br />> Cook< br /> < br />< / div>< div id =user_5style =display：none> Gary Doll> Racecar Driver< br>< br />< / div>< div id =user_6style =display：none> Tod Akers< br />足球运动员< / div>< div id = user_7style =display：none> Greg Barkley< br />室内设计师< br />< div id =user_8style =display：无>阿伦西蒙斯< br />第8名冠军< br /><< br ; b / b>< / div>
使用正则表达式将搜索字符串中的单词拆分，如
searchString.split（/ \W /）;
并对结果数组中的每个单词进行OR搜索。
更新小提琴
var searchStrings = str_needle.split（/ \W /）; $ var $ current $ = $ search $ {
$ b for（var i = 0，len = searchStrings.length; i< len; i ++）{
var currentSearch = searchStrings [i] .toUpperCase（）
if（currentSearch！==）{
nameDivs = document.getElementsByClassName（name）; （var j = 0，divsLen = nameDivs.length; j< divsLen; j ++）{
if（nameDivs [j] .textContent.toUpperCase（）。indexOf（currentSearch）！== - 1）{
nameDivs [j] .style.display =block;
}
}
}
}
What I'm looking for:
I'm working on creating an easy way for a user to search a list of people, and for results to instantly display below the search field. The results MUST display "close" results, rather than exact. For example: User searches for "Mr. Smith" and The following existing result is displayed: "John Smith" (since there is no "Mr. Smith" entry, it displayed one with the keyword "smith")
What I have:
I have a working code that lets the user enter some characters and all divs that include a string matching the input is displayed (see in jsfiddle: http://jsfiddle.net/891nvajb/5/ Code is also below) Unfortunately, this only displays results that match EXACTLY.
<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>
Split the words in the search string with a regex like
searchString.split(/\W/);
and do a OR search over each of the words in the resulting array.
Updated 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
