Question

我正在开设一个页面，用于预先注册我网站上的活动。在此页面上，人们需要能够将名称添加到事件创建者想要的多个插槽中（因此需要处理3个人的篮球队和50个人的宴会）。我有一个高质量的类似Facebook的搜索栏，以便我可以整齐地搜索数据库并选择所需的人。遗憾的是，我的搜索栏是由for循环创建的，它创建了许多不同的ID填充搜索栏，但每个搜索栏都留空，第一个搜索栏是唯一填充的搜索栏。

我发现它处理了页面顶部的jQuery代码。我的问题是，我需要这个jQuery在单个页面上的多个搜索栏上工作。如果有人能帮助我实现这一目标，我将非常感激。

＆＃34;顶级代码＆＃34;或者成功从数据库中获取的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元素。在每次迭代中，我们都可以找到相应的结果＆＃39;使用jQuery＆＃39; next()函数的元素，该函数检索元素的紧随其后的兄弟。如果代码被更改，那么＆＃39;结果＆＃39;在`.search＆＃39;之后元素不直接出现元素，这将需要改变。

$(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搜索栏每页只工作一次

1 个答案: