单击时清除文本
单击时清除文本
提问于 2020-12-29 19:51:01
我想清除所有以前的搜索词和结果(here is what happens after the first search)。我可以清除搜索词，但当我们单击任何其他字母表(here is what happens after the second search)时，无法删除找到的n个元素和搜索结果。
在这个例子中，当我搜索一个字母A时，它会显示找到27个单词的结果，然后我单击字母B，它会从文本中删除搜索到的单词，但不会删除“找到n个元素”文本。
有人能在这方面帮我一下吗？
$(document).ready(function(){
// ===================================
// Filter per data-key="value"
$.fn.filterData = function(key, value) {
return this.filter(function() {
return $(this).data(key) == value;
});
};
// :contains case-insensitive
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// reset
function resetAlphabet(ab, letter) {
var starter = (letter == '') ? $(ab).children('button').first().data('value') : letter;
var lettercode = starter.charCodeAt(0);
if ((lettercode >= 65) && (lettercode <= 90) && (ab != '')) {
activateLetter($(ab).children('button').filterData("value", starter));
}
}
// active div letter
function activateLetter(ellet) {
var thisletter = $(ellet).data('value');
window.scrollTo(0, 0);
$(ellet).addClass('active');
$(ellet).siblings().removeClass('active');
if (!$("#" + thisletter).hasClass('active')) {
$(source).children('div').removeClass('active');
$("#" + $(ellet).data('value')).addClass('active');
}
}
// delay
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
// Startup
var $ts = $('.text-search');
var source = '';
var alphabet = '';
var searchtitle = '';
var searchin = '';
var lbl = '';
var $elemsfound;
var offset = 0;
if ($ts.length > 0) {
alphabet = $ts.data('alphabet') || alphabet;
source = $ts.data('source') || source;
searchtitle = $ts.data('searchtitle') || searchtitle;
lbl = $("label[for='" + $ts.attr('id') + "']");
offset = $ts.data('offset') || 0;
offset = ((searchtitle != '') && offset == 0) ? parseInt($(searchtitle).css('marginTop')) : offset;
if ($(source).length == 1) {
if (alphabet != '') {
var $ab = $(alphabet);
if ($ab.length > 0) {
var alphaletters = $(source).children('div');
$(alphaletters).css('backgroundColor','').css('border','');
$ab.html('');
$(alphaletters).each(function(id, elem){
$ab.append('<button type="button" data-value="' + $(elem).attr('id') + '">' + $(elem).attr('id') + '</button>' + " | ");
});
$ab.on('click', 'button', function(e){
e.preventDefault();
e.stopPropagation();
$('.text-search').val('');
activateLetter($(this))
});
resetAlphabet(alphabet, '');
} else {
alphabet = '';
$(source).children('div').addClass('active');
}
} else {
$(source).children('div').addClass('active');
}
$('body').on('keyup', '.text-search', delay(function(e){
var sSearch = $(this).val();
if (sSearch != '') {
var fl = sSearch.substring(0, 1).toUpperCase();
$(searchin + '.found').removeClass('found');
searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
console.log('search for a word: "' + sSearch + '" in "' + searchin + '"');
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
console.log('element found: ' + $elemsfound.length);
if ($elemsfound.length > 0) {
resetAlphabet(alphabet, fl);
if (searchtitle != '') {
var goto = $elemsfound.first().offset().top - offset;
$("html,body").animate({ scrollTop: goto}, 500 );
} else {
console.log('it is a global search')
$(source).html().replace(sSearch, '<span class="found">' + sSearch + '</span>');
}
} else {
searchin = source + ((alphabet == '') ? '' : ' > div') + ((searchtitle == '') ? '' : ' ' + searchtitle);
console.log('I DID NOT FIND ANYTHING so I am looking for a word:"' + sSearch + '" in "' + searchin + '"');
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
if ($elemsfound.length > 0) {
fl = $elemsfound.first().parent().attr('id');
resetAlphabet(alphabet, fl);
searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
var goto = $elemsfound.first().offset().top - offset;
console.log(goto);
$("html,body").animate({ scrollTop: goto}, 500 );
}
}
$elemsfound.addClass('found');
if (lbl.length == 1) {lbl.html('Found' + ($elemsfound.length == 1 ? '' : '') + ' ' + $elemsfound.length + ' word' + ($elemsfound.length == 1 ? '' : 's'))};
} else {
resetAlphabet(alphabet, '');
$(searchin).removeClass('found');
if (lbl.length == 1) {lbl.html('Browse the glossary using this index')}
}
}, 500));
}
}
});body {font-family:helvetica;font-size:14px;}
label {display:block;}
input[type='text']
{width:100%; font-size: 0.9em;
font-family: helvetica;
font-style: italic;
padding: 5px 8px;}
h3 {margin-top:30px;}
.alphabet {display:block; width: 1210px;}
.alphabet button {
font: inherit;
color: #398FFF;;
cursor: pointer;
display: inline-block;
position: relative;
width:40px;
height:40px;
line-height:40px;
font-size:14px;
margin: 0 -6px 10px -5px;
border:none;
background: none;
padding:0;
box-shadow:0;
transition:all 0.3s ease-in-out;
outline:0;
}
.alphabet:focus {outline:0;}
.alphabet button:hover {background-color:#FFF; font-weight:bold;}
.alphabet button.active {background-color:#ffa505; font-weight:bold; color:#FFF; box-shadow:0px 0px 0px 2px #FFF inset; }
.glossary {display:block; width:100%; clear:both;}
.glossary .letter {display:none; width: 1115px;; clear:both; text-align:justify; padding-bottom:30px;}
.glossary .letter.active {display:block;}
.glossary h3 {font-size:18px; font-weight:300; margin-bottom:5px;}
.glossary h3.found {font-weight:bold;color: #800020;}
.glossary span.found {background-color:red;}
h3.gloss{
font-family: Helvetica;
font-size: 1.3rem;
font-weight: 600;
}
h3.browse{
font-size: 1.1rem;
font-family: helvetica;
font-weight: 600;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="sticky">
<h3 class="gloss">Glossary</h3>
<input type="text" placeholder="Enter search terms..." id="text-search" class="text-search" data-source="#glossary" data-alphabet="#alphabet" data-searchtitle="h3" data-offset="300"/>
<h3 class="browse">Browse by alphabet</h3>
<label for="text-search">Browse the glossary using this index</label>
<div class="alphabet" id="alphabet">
</div>
</div>
<div class="glossary" id="glossary">
<div class="letter" id="A">
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr></div>
<div class="letter" id="B">
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<hr>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-30 00:55:11
您可以简单地调用与开始时相同的代码(lbl.html('Browse the glossary using this index')。您可以将其设置为函数(resetMsg)，然后从click处理程序调用它：
$(document).ready(function(){
// ===================================
var $ts = $('.text-search');
var source = '';
var alphabet = '';
var searchtitle = '';
var searchin = '';
var lbl = '';
var $elemsfound;
var offset = 0;
// Filter per data-key="value"
$.fn.filterData = function(key, value) {
return this.filter(function() {
return $(this).data(key) == value;
});
};
// :contains case-insensitive
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// reset
function resetAlphabet(ab, letter) {
var starter = (letter == '') ? $(ab).children('button').first().data('value') : letter;
var lettercode = starter.charCodeAt(0);
if ((lettercode >= 65) && (lettercode <= 90) && (ab != '')) {
activateLetter($(ab).children('button').filterData("value", starter));
}
}
// active div letter
function activateLetter(ellet) {
var thisletter = $(ellet).data('value');
window.scrollTo(0, 0);
$(ellet).addClass('active');
$(ellet).siblings().removeClass('active');
if (!$("#" + thisletter).hasClass('active')) {
$(source).children('div').removeClass('active');
$("#" + $(ellet).data('value')).addClass('active');
}
}
// delay
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
function resetMsg(){
let lbl = $("label[for='" + $ts.attr('id') + "']");
lbl.html('Browse the glossary using this index')
}
// Startup
if ($ts.length > 0) {
alphabet = $ts.data('alphabet') || alphabet;
source = $ts.data('source') || source;
searchtitle = $ts.data('searchtitle') || searchtitle;
lbl = $("label[for='" + $ts.attr('id') + "']");
offset = $ts.data('offset') || 0;
offset = ((searchtitle != '') && offset == 0) ? parseInt($(searchtitle).css('marginTop')) : offset;
if ($(source).length == 1) {
if (alphabet != '') {
var $ab = $(alphabet);
if ($ab.length > 0) {
var alphaletters = $(source).children('div');
$(alphaletters).css('backgroundColor','').css('border','');
$ab.html('');
$(alphaletters).each(function(id, elem){
$ab.append('<button type="button" data-value="' + $(elem).attr('id') + '">' + $(elem).attr('id') + '</button>' + " | ");
});
$ab.on('click', 'button', function(e){
e.preventDefault();
e.stopPropagation();
$('.text-search').val('');
activateLetter($(this));
resetMsg();
});
resetAlphabet(alphabet, '');
} else {
alphabet = '';
$(source).children('div').addClass('active');
}
} else {
$(source).children('div').addClass('active');
}
$('body').on('keyup', '.text-search', delay(function(e){
var sSearch = $(this).val();
if (sSearch != '') {
var fl = sSearch.substring(0, 1).toUpperCase();
$(searchin + '.found').removeClass('found');
searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
console.log('search for a word: "' + sSearch + '" in "' + searchin + '"');
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
console.log('element found: ' + $elemsfound.length);
if ($elemsfound.length > 0) {
resetAlphabet(alphabet, fl);
if (searchtitle != '') {
var goto = $elemsfound.first().offset().top - offset;
$("html,body").animate({ scrollTop: goto}, 500 );
} else {
console.log('it is a global search')
$(source).html().replace(sSearch, '<span class="found">' + sSearch + '</span>');
}
} else {
searchin = source + ((alphabet == '') ? '' : ' > div') + ((searchtitle == '') ? '' : ' ' + searchtitle);
console.log('I DID NOT FIND ANYTHING so I am looking for a word:"' + sSearch + '" in "' + searchin + '"');
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
if ($elemsfound.length > 0) {
fl = $elemsfound.first().parent().attr('id');
resetAlphabet(alphabet, fl);
searchin = source + ((alphabet == '') ? '' : ' > div#' + fl) + ((searchtitle == '') ? '' : ' ' + searchtitle);
$elemsfound = $(searchin + ':contains("' + sSearch + '")');
var goto = $elemsfound.first().offset().top - offset;
console.log(goto);
$("html,body").animate({ scrollTop: goto}, 500 );
}
}
$elemsfound.addClass('found');
if (lbl.length == 1) {lbl.html('Found' + ($elemsfound.length == 1 ? '' : '') + ' ' + $elemsfound.length + ' word' + ($elemsfound.length == 1 ? '' : 's'))};
} else {
resetAlphabet(alphabet, '');
$(searchin).removeClass('found');
if (lbl.length == 1) {resetMsg()}
}
}, 500));
}
}
});body {font-family:helvetica;font-size:14px;}
label {display:block;}
input[type='text']
{width:100%; font-size: 0.9em;
font-family: helvetica;
font-style: italic;
padding: 5px 8px;}
h3 {margin-top:30px;}
.alphabet {display:block; width: 1210px;}
.alphabet button {
font: inherit;
color: #398FFF;;
cursor: pointer;
display: inline-block;
position: relative;
width:40px;
height:40px;
line-height:40px;
font-size:14px;
margin: 0 -6px 10px -5px;
border:none;
background: none;
padding:0;
box-shadow:0;
transition:all 0.3s ease-in-out;
outline:0;
}
.alphabet:focus {outline:0;}
.alphabet button:hover {background-color:#FFF; font-weight:bold;}
.alphabet button.active {background-color:#ffa505; font-weight:bold; color:#FFF; box-shadow:0px 0px 0px 2px #FFF inset; }
.glossary {display:block; width:100%; clear:both;}
.glossary .letter {display:none; width: 1115px;; clear:both; text-align:justify; padding-bottom:30px;}
.glossary .letter.active {display:block;}
.glossary h3 {font-size:18px; font-weight:300; margin-bottom:5px;}
.glossary h3.found {font-weight:bold;color: #800020;}
.glossary span.found {background-color:red;}
h3.gloss{
font-family: Helvetica;
font-size: 1.3rem;
font-weight: 600;
}
h3.browse{
font-size: 1.1rem;
font-family: helvetica;
font-weight: 600;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="sticky">
<h3 class="gloss">Glossary</h3>
<input type="text" placeholder="Enter search terms..." id="text-search" class="text-search" data-source="#glossary" data-alphabet="#alphabet" data-searchtitle="h3" data-offset="300"/>
<h3 class="browse">Browse by alphabet</h3>
<label for="text-search">Browse the glossary using this index</label>
<div class="alphabet" id="alphabet">
</div>
</div>
<div class="glossary" id="glossary">
<div class="letter" id="A">
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr>
<h3>A</h3></br>
Test
<hr></div>
<div class="letter" id="B">
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<h3>B</h3></br>
Test
<hr>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65491684
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号