Stack Overflow: 31390472

http://stackoverflow.com/questions/31390472/jquery-search-bar-only-working-one-time-per-page/31390948#31390948

by sdgluck

HTML

<div id="container"></div>

CSS

.divResult {
    display: none;
}

JavaScript

for (var i = 0; i < 3; i++) {
    $('#container').append('<div class="row"><div class="form-group"><div class="col-md-12"><label>Member Name:</label><input type="text" class="form-control search" name="member' + i + '" autocomplete="off" id="inputSearch" placeholder="Search..."><div class="divResult" style="z-index:999; margin-top: 35px;">RESULT ELEMENT ' + i + '</div></div></div></div>');
}

$(function () {
    $('.search').each(function(index) {
        var $searchElement = $(this);
        var $resultElement = $searchElement.next();
        
        console.log(index, $searchElement, $resultElement);

        $searchElement.on('keyup', function() {
            var inputSearch = $searchElement.val();
            var dataString = 'searchword=' + inputSearch;
    
            if (inputSearch != '') {
                $.ajax({
                    type: "POST",
                    url: "../searchMyChap.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $resultElement.html(html).show();
                    }
                });
            }
    
            return false;
        });

        $resultElement.on("click", function (e) {
            var $clicked = $(this);
            var $name = $clicked.find('.name').html();
            var decoded = $("<div/>").html($name).text();
            $searchElement.val(decoded);
        });

        $(document).on("click", function (e) {
            var $clicked = $(e.target);
            if (!$clicked.hasClass("search")) {
                $resultElement.fadeOut();
            }
        });

        $searchElement.on('click', function () {
            console.log(index + ' clicked');
            $resultElement.fadeIn();
        });
    });
});