我有一个文本框来搜索div中存在的关键字。我期待在搜索时进行一种(和(工作,最终结果是我得到了父类名。
例如:
input : google,facebook
output : p1
问题:当我在同一个div中出现2个相同的关键字时,整个逻辑就会失败。
这是代码:
<input type="text" id="k_search">
<div class="p1">
<div class="keyword">google is a search engne</div>
<div class="keyword">facebook is sm site</div>
<div class="keyword">orkut is no more</div>
</div>
<div class="p2">
<div class="keyword">google is a gaint</div>
<!-- everything works fine until i have 2 keywords appearing inside
same parent div like this
<div class="keyword">google has gmail</div>
// -->
</div>
这是我想出的javascript:
<script>
jQuery(document).ready(function($) {
$('#k_search').keyup(function() {
var sel = [];
var sel_text = $(this).val();
var search_arry = sel_text.split(',');
var newArray = search_arry.filter(function(v){return v!==''});
for(var i = 0;i<newArray.length;i++){
$(".keyword").each(function() {
var cmp = $(this).text().toLowerCase();
var s_written = newArray[i].toLowerCase()
if(cmp.indexOf(s_written) > -1)
{
var temp = $(this).parent().prop('className');
sel.push(temp);
}
});
}
counts = {};
new_sel = [];
if(sel.length>1){
/* Counting occurence of class names*/
jQuery.each(sel, function(key,value) {
if (!counts.hasOwnProperty(value)) {
counts[value] = 1;
} else {
counts[value]++;
}
});
jQuery.each(counts, function(key,value) {
if(value == newArray.length)
{
new_sel.push(key);
}
});
process(new_sel);
} else {
process(sel);
}
});
});
</script>
这是小提琴:https://jsfiddle.net/3q3ajusL/7/
你能帮忙吗?
根据您的要求,这应该可以找到您要查找的内容。越来越难以理解代码,所以我的做法略有不同。
jQuery(document).ready(function($) {
$('#k_search').keyup(function() {
var keywords = $(this).val().toLowerCase().split(',').filter(v => !!v);
var $divs = $('div:has(>.keyword)').filter((index, div) => {
var text = $(div).find('.keyword')
.map((index, keyword) => $(keyword).text().toLowerCase())
.toArray().join('rn');
for (const keyword of keywords) {
if (!~text.indexOf(keyword)) {
return false;
}
}
return true;
});
$("#result").text($divs.map((index, div) => $(div).prop('className')).toArray());
});
});
你几乎做到了。增加进程功能。
<script>
jQuery(document).ready(function($) {
$('#k_search').keyup(function() {
var sel = [];
var sel_text = $(this).val();
console.log(sel_text);
var search_arry = sel_text.split(',');
var newArray = search_arry.filter(function(v){return v!==''});
for(var i = 0;i<newArray.length;i++){
$(".keyword").each(function() {
var cmp = $(this).text().toLowerCase();
var s_written = newArray[i].toLowerCase()
if(cmp.indexOf(s_written) > -1)
{
var temp = $(this).parent().prop('className');
sel.push(temp);
}
});
}
counts = {};
new_sel = [];
if(sel.length>1){
/* Counting occurence of class names*/
jQuery.each(sel, function(key,value) {
if (!counts.hasOwnProperty(value)) {
counts[value] = 1;
} else {
counts[value]++;
}
});
jQuery.each(counts, function(key,value) {
if(value == newArray.length)
{
new_sel.push(key);
}
});
process(new_sel);
}else
{
process(sel);
}
});
});
function process(a) {
console.log(a[0]);
}
</script>