主页 / 问题 / 704179
Accepted
pridan
Asked:2020-08-10 04:41:56 +0000 UTC2020-08-10 04:41:56 +0000 UTC

滚动到页面上的文本（使用 pdf.js 将 pdf 呈现为文本）

  • 772

需要优化一个旧应用程序。有页面搜索。通过单击找到的一个，页面上的该文本应该会滚动。它是如此执行。但由于某种原因，它不起作用。请告诉我搜索还有一件事是区分大小写的。我理解是因为 :contains 。什么可以代替它？谢谢

$("#autocompleateitem2").on("filterablebeforefilter", function (e, data) {
    var $ul = $(this),
        $input = $(data.input),
        value = $input.val(),
        html = "";
    $ul.html("");
    if (value && value.length > 2) {
        $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
        $ul.listview("refresh");
        var a = $input.val();
        $('.textLayer div:contains(' + a + ')')
            .map(function () {
                html += "<li><a href='#' title='" + $(this).html() + "'>" + $(this).html() + "</a></li>";
            });
        $ul.html(html);
        $ul.listview("refresh");
        $ul.trigger("updatelayout");
    }
    $("#autocompleateitem2 a").click(function () {
        var elementClick = $(this).attr("title").toString();
        console.log(elementClick);
        console.log(elementClick.isPrototypeOf());
        var element = $( elementClick );
        console.log(element);
        $('#viewer').scrollTo(element, {duration: 'slow', offsetTop: '60'});
    });
});
javascript

1 个回答

  1. Best Answer

    您的搜索元素有问题。如何正确返回是用js代码写的，以及js代码开头带case的解决方案，你得自己创建:Contains（名字一样，只有大写字母）

    //Для не чувствиетльности к регистру создается вот такой самодельный contains
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

function search(){
    //То же саме. что у вас  из атрибута
    var searchString = $('#search').val();
    //Находит элемент через свой Contains
    var element = $('#viewer div:Contains("'+searchString+'")');
    
    $('#viewer').animate({
            scrollTop: $(element).offset().top + $('#viewer').scrollTop() - 30
        }, 2000); 
}

//ваш код должен выглядить примерно так:
$("#autocompleateitem2 a").click(function () {
    var elementClick = $(this).attr("title");
    //Если прямо в блоке #viewer находятся те самые div для поиска, если нет надо прописать путь к родителю от viewer например #viewer>.wrapperForSearch>div:Contains("'+elementClick+'")
    var element = $('#viewer div:Contains("'+elementClick+'")');
    $('#viewer').animate({
            scrollTop: $(element).offset().top + $('#viewer').scrollTop() - 30
        }, 2000); 
});
    #viewer{
    max-height: 200px;
    position: absolute;
    overflow-y: auto;
}
.search2{
    margin-top: 1000px;
}
.search1{
    margin-top: 500px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search"><button onclick="search()">заскролить</button>
<div id="viewer">
    <div><p>roll</p></div>
    <div class="search1"><p>test1</p></div>
    <div class="search2"><p>test2</p></div>
</div>

    • 1

相关问题