如何使用搜索框滚动到列表中的特定数据

Question

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

这里是JSFIDDLE

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

$(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 };
    }       

Answer 1

这就是你想要的

JsFiddle： http://jsfiddle.net/q52Fc/1/

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>

JavaScript：

$(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：没有做任何改变。

如果您想了解更多有关职位的信息，可以阅读以下内容：http://api.jquery.com/position/

Answer 2

尝试类似的东西

$(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 };
}

DEMO