jQuery 搜索栏每页只工作一次

Question

我正在开发我网站上的活动预注册页面。在此页面上，人们需要能够根据活动创建者的意愿将姓名添加到任意多个位置（因此它需要处理 3 人篮球队和 50 人宴会）。我制作了一个高质量的类似 facebook 的搜索栏，这样我就可以在数据库中整齐地搜索 select 想要的人。遗憾的是，我有这个搜索栏是由 for 循环创建的，它创建了许多不同的 ID 填充搜索栏，但每个搜索栏都是空的，第一个搜索栏是唯一一个被填充的搜索栏。

我发现它处理我页面顶部的 jQuery 代码。我的 question/issue 是我需要这个 jQuery 来处理单个页面上的多个搜索栏。如果有人可以帮助我完成这项工作，我将不胜感激。

成功从数据库中提取的"top code"或JQuery代码是：

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

    jQuery("#divResult").live("click",function(e){ 
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#inputSearch').val(decoded);
    });
    jQuery(document).live("click", function(e) { 
        var $clicked = $(e.target);
        if (! $clicked.hasClass("search")){
        jQuery("#divResult").fadeOut(); 
        }
    });
    $('#inputSearch').click(function(){
        jQuery("#divResult").fadeIn();
    });
});
</script>
<style type="text/css">
body{ 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.contentArea{
    width:600px;
    margin:0 auto;
}
/*
#inputSearch
{
    width:350px;
    border:solid 1px #000;
    padding:3px;
}
*/
#divResult
{
    position:absolute;
    width:545px;
    display:none;
    margin-top:-1px;
    border:solid 1px #dedede;
    border-top:0px;
    overflow:hidden;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    box-shadow: 0px 0px 5px #999;
    border-width: 3px 1px 1px;
    border-style: solid;
    border-color: #333 #DEDEDE #DEDEDE;
    background-color: white;
}
.display_box
{
    padding:4px; border-top:solid 1px #dedede; 
    font-size:12px; height:50px;
}
.display_box:hover
{
    background:#0088cc;
    //background:#3bb998;

    color:#FFFFFF;
    cursor:pointer;
}

打印搜索栏的for循环代码如下：

for($i = 0; $i < $looper; $i++)
                                        {
                                            echo'
                                            <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 id="divResult" style="z-index:999; margin-top: 35px;" ></div>

                                                    </div>
                                                </div>
                                            </div>';
                                        }

Answer 1

编辑： Working JSFiddle

第一个问题是 for 循环的每次迭代都会使用 id="divResult" 创建一个元素。一个 ID 应该在整个文档中使用一次。我更改了 for 循环以生成一个带有 class="divResult" 的元素。如果您使用此更改，请记住您的 CSS 需要相应更改。

for ($i = 0; $i < $looper; $i++) {
  echo '
    <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;"></div>
        </div>
      </div>
    </div>';
}

接下来我们遍历每个 .search 元素。在每次迭代中，我们可以使用 jQuery 的 next() 函数找到相应的 'result' 元素，该函数检索元素的紧随其后的兄弟元素。如果代码被更改，使得 'results' 元素 而不是 直接出现在 `.search' 元素之后，这将需要更改。

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

jQuery 搜索栏每页只工作一次

jQuery search bar only working one time per page

html

javascript

search

jquery

multiple-instances