Javascript 如何使用searchbox滚动到列表中的特定数据

我有一个搜索框和一个div列表，由项目中数据库的数据填充。我的想法是，当我在搜索框中键入内容时，它将在列表中的特定数据上滚动。谢谢，祝你今天愉快

这是

我已经编辑了这个问题，并将这个脚本添加到我的项目中，但它仍然没有滚动

$(document).ready(function() {
        $('.search-field').on('keyup blur change', function() {
            var text_s = $(this).val();

            $("li#dirlist").removeClass("highlight");

            if (text_s.length > 0){
                $("li#dirlist").each(function(){
                    var li_value = $(this).text();
                    if (li_value.indexOf(text_s) >= 0){
                        $(this).addClass("highlight");
                        var x = getOffset( document.getElementById(this.id) ).left;
                    }
                });
            }
        });
    }); 

    function getOffset( el ) {    
        var _x = 0;
        var _y = 0;
        while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
            _x += el.offsetLeft - el.scrollLeft;
            _y += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
        }
        window.scrollTo(_x,_y);
        return { top: _y, left: _x };
    }       

试试像这样的东西

$(function() {
    $('.search-field').on('keyup blur change', function() {
        var text_s = $(this).val();

        $("li").removeClass("highlight");

        if (text_s.length > 0){
            $("li").each(function(){
                var li_value = $(this).text();
                //alert(this.id);
                if (li_value.indexOf(text_s) >= 0){
                    //alert(text_s);
                    $(this).addClass("highlight");
                    var x = getOffset( document.getElementById(this.id) ).left;                    

                }
            });
        }
    });
});

function getOffset( el ) {    
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    window.scrollTo(_x,_y);
    return { top: _y, left: _x };
}

这是你想要的

JsFiddle:

HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="green-bar">
                <h4><center>Directory</center></h4>
            </div>
        </div>
    </div>
    </br>
    </br>
    <div class="span4">
        <div id="name-dir">
            <div class="row">
                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend"> <span class="add-on"><i class="icon-search"></i></span>

                            <input class="block search-field" id="inputIcon" type="text" placeholder="Search">
                        </div>
                    </div>
                </div>
            </div>
            </br>
            <div class="contact-list">
                <div class="contact-gray-bar">A</div>
                <ul class="contact">
                    <!-- insert records here -->
                    <li>Apple</li>
                    <li>Amethyst</li>
                    <li>Aratilis</li>
                </ul>
                <div class="contact-gray-bar">B</div>
                <ul class="contact">
                    <!-- insert records here -->
                    <li>Banana</li>
                </ul>
                <div class="contact-gray-bar">C</div>
                <ul class="contact">
                    <!-- insert records here -->
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                    <li>Cross</li>
                </ul>
                <div class="contact-gray-bar">K</div>
                <ul class="contact">
                    <!-- insert records here -->
                    <li>Kiwi</li>
                </ul>
                </br>
            </div>
        </div>
    </div>
</div>
</div>

$(function () {
    $('.search-field').on('keyup', function () {
        var first_result = false;

        var text_s = $(this).val().toLowerCase();

        //Reinit li elements and the contact-list position
        $("li").removeClass("highlight");
        $(".contact-list").scrollTop($(".contact-list").position().top);

        if (text_s.length > 0) {
            $("li").each(function () {
                var li_value = $(this).text().toLowerCase();
                if (li_value.indexOf(text_s) >= 0) {
                    $(this).addClass("highlight");
                    if (first_result == false) {
                        //Have to move to the 1rst element's position
                        first_result = true;
                        $(".contact-list").scrollTop($(this).position().top);
                    }
                }
            });
        }
    });
});

CSS:未做任何更改

---

如果您想了解更多关于该职位的信息，可以阅读以下内容：

Hi。谢谢你的回答，但它仍然没有在搜索数据上滚动。我需要使用锚来滚动吗？我在我的项目中应用了锚。它包含300多条记录，但仍不工作。也许在我使用的jquery版本上？我调整了小提琴的大小。是的，你说得对。它在这里工作。但是，当我在代码中应用它时，为什么它不起作用呢？我在我使用的版本上有jquery-1.8.3.js。把你的全部代码放在这里，那么你可能会对jquery做一些错误的事情。。还有一件事，如果你的页面有滚动条，请把它放在这里，然后再试一次。我不能把全部代码放在这里。它说它有太多的字符。我只是在我的代码中添加了你的答案并编辑了一些。非常感谢你！