PHP Ajax live search with load more

Question

I would like if I scroll bottom of .dropdown-menu, load more 7 row in database. I don't know why not using this script. I'm using bootstrap css and js. I tried the bootstrap-select.js with live search, but I have 2000 row in "town" database, and bootstrap-select doesn't have "load more" function.

<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>';

    }

}

?>

And that gives you an excuse? It takes like what, 15 seconds extra to make it secure using prepared statements? I call that reason pure utterly laziness, I'd fire you immediately if I was your boss. There are also questions on how you assume a connection and query to be 100% successful. — Xorifelse, Mar 30 '17 at 21:29

Hossam · Answer 1 · 2017-03-30T21:38:41.720

Maybe this is not neatly finished code, but I've added a loadMore button & attached search function to the click event of it.

The modified HTML code:

<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>

No problem, learn from it. I believe helpful people should be [taught](http://stackoverflow.com/questions/154059/how-do-you-check-for-an-empty-string-in-javascript) — Xorifelse, Mar 30 '17 at 21:39

PHP Ajax live search with load more

1 Answers1