Question

如果我滚动.dropdown-menu的底部，我想在数据库中加载更多7行。我不知道为什么不使用这个脚本。我正在使用bootstrap css和js。我尝试使用实时搜索的bootstrap-select.js，但是我在“town”数据库中有2000行，而bootstrap-select没有“加载更多”功能。

<meta charset="utf-8">

<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap.js"></script>

<style>.dropdown-menu{height: auto;max-height: 150px;overflow-x:hidden;}</style>

<div class="dropdown">

    <input class="dropdown-toggle" data-toggle="dropdown" id="live" placeholder="Town">
    <ul class="dropdown-menu"></ul>

</div>

<script>

$(document).ready(function () {

    var limit = 7;
    var start = 0;
    var action = 'inactive';
    var location = $('#live').val();

    $('.dropdown-menu').hide();

    function search() {

        var limit = 7;
        var start = 0;
        var action = 'inactive';
        var location = $('#live').val();

        if (location != '') {

            $('.dropdown-menu').show();

            $.ajax({

                url: "search.php",
                type: "POST",
                data: {location:location, limit:limit, start:start},
                cache: false,
                success: function(data) {

                    $('.dropdown-menu').html(data);

                    if(data == '') {

                        $('#load').text('No more data.');
                        action = 'active';

                    } else {

                        $('#load').text('Loading...');
                        action = 'inactive';

                    }

                    $('.dropdown-menu li a').click(function() {

                        $('.dropdown-menu li a').removeClass('active');

                        $(this).addClass('active');

                        var active = $('li a.active').html();

                        $('#live').val(active);

                    });

                }

            });

        } else {

            $('.dropdown-menu').hide();

            $('.dropdown-menu li a').removeClass('active');

        }

    };

    if (action == 'inactive') {

        action = 'active';
        $('#live').on('keyup change', search);

    }

    $(window).scroll(function(){

        if ($(window).scrollTop() + $(window).height() > $(".dropdown-menu").height() && action == 'inactive') {

            action = 'active';
            start = start + limit;
            setTimeOut(function(){
                $('#live').on('keyup change', search);
            }, 1000);

        }

    });

});

</script>

的search.php：

<?php

$connect = mysqli_connect("localhost", "root", "", "mydb");

$location = $connect->real_escape_string($_POST["location"]);

if (isset($_POST["location"])) {

    $data = mysqli_query($connect, "SELECT * FROM towns WHERE town LIKE '%".$location."%' ORDER BY id LIMIT ".$_POST["start"].", ".$_POST["limit"]."");

    $data_count = mysqli_num_rows($data);

    if ($data->num_rows === 0) {

        echo '<li>No data!</li>';

    } else {

        while ($row = mysqli_fetch_array($data)) {

            echo '<li><a href="#">'.$row["town"].'</a></li>';

        }

        echo '<div id="load"></div>';

    }

}

?>

Answer 1

也许这不是整齐的代码，但我已经添加了一个loadMore按钮＆amp;附加搜索功能到它的点击事件。

修改后的HTML代码：

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="bootstrap.js"></script>
    <style>.dropdown-menu{height: auto;max-height: 150px;overflow-x:hidden;}</style>
</head>
<body>
    <div class="dropdown">
        <input class="dropdown-toggle" data-toggle="dropdown" id="live" placeholder="Town">
        <ul class="dropdown-menu"></ul>
        <button type="button" id="loadMore" style="display: none;"></button>
    </div>
    <script>
    function search() {
        if (location != '') {
            $('.dropdown-menu').show();
            $.ajax({
                url: "search.php",
                type: "POST",
                data: {location:location, limit:limit, start:start},
                cache: false,
                success: function(data) {
                    $('.dropdown-menu').html(data);
                    if(!data) {
                        $('#load').text('No more data.');
                        action = 'active';
                    } else {
                        $('#load').text('Loading...');
                        action = 'inactive';
                    }
                    $('.dropdown-menu li a').click(function() {
                        $('.dropdown-menu li a').removeClass('active');
                        $(this).addClass('active');
                        var active = $('li a.active').html();
                        $('#live').val(active);
                    });
                    start = start + limit;
                    $('#loadMore').show();
                }
            });
        } else {
            $('.dropdown-menu').hide();
            $('.dropdown-menu li a').removeClass('active');
        }
    }

    $(document).ready(function () {
        limit = 7;
        start = 0;
        action = 'inactive';
        location = $('#live').val();
        $('.dropdown-menu').hide();

        if (action == 'inactive') {
            action = 'active';
            $('#loadMore').on('click', search);
            $('#live').on('keyup change', search);
        }

        $(window).scroll(function(){
            if ($(window).scrollTop() + $(window).height() > $(".dropdown-menu").height() && action == 'inactive') {
                action = 'active';
                start = start + limit;
                setTimeOut(function(){
                    $('#live').on('keyup change', search);
                    $('#loadMore').on('click', search);
                }, 1000);

            }
        });
    });
</script>
</body>
</html>

PHP Ajax实时搜索加载更多

1 个答案: