建议框未显示最近的输入

Question

I cannot seem to get my suggestion box to show for the nearest input after adding more inputs dynamically.

The below code is where I am currently, I can see the suggestion box for a new input and add to that new input but if I go back to edit the input data the suggestion box fails to show.

<div id="tester"></div>
<button id="add_test">ADD</button>



$(document).ready(function() {

$("#add_test").on("click", function() {
    var input = '<div class="flavhey"><div class="flavourInput"><input class="ftext form-control flavour-name-input" type="text" name="flav-name-input" value="" placeholder="Flavour Name" /><div class="suggestion-box"></div></div></div>';
    $('#tester').append(input);
});


$(document).on('keyup', '.flavhey input', function(e){


    var token = '<?php echo json_encode($token); ?>';
    var search = $(this).val();

    $.ajax({
        type: "POST",
        url: "controllers/recipeControl.php",
        data: { token: token, search: search },
        beforeSend: function(){
            $(".flavour-name-input").css("background","#FFF no-repeat 165px");
            $(".suggestion-box").css("background","#FFF no-repeat 165px");
    },
    success: function(data){


        $('.flavhey input').closest('flavourInput input').next('.suggestion-box').show();
        $('.flavhey input').next('.suggestion-box').html(data);
        $(".suggestion-box").css("background","#FFF");
    }
    });
    return false;
});
$(document).on("click",".search-flavour",function(e) {
    e.preventDefault();

        $(this).closest('.flavourInput').find('.flavour-name-input').val($(this).text());

        $('.suggestion-box').hide();
    return false;

if(isset($_POST['search'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) 
        && json_decode($_POST['token']) === $_SESSION['token']){
            $search = $_POST['search'];
            $html = '<ul>';
            $content = $flavours->getAllFlavoursSearch($search);
            foreach ($content as $con) {
                $html .= '<li class="search-flavour"><b>'.$con['flavour_name'].'</b> - <i>'.$con['flavour_company_name'].'</i></li>';
            }
            $html .= '</ul>';
            echo $html;
        }

    }

Answer 1

Ok short version:

Use var box = $(e.target).next(".suggestion-box"); to aquire a reference to the correct suggestion box in the success handler of the ajax request.

---

Long version: I replaced the php parts with static placeholders to get a runnable example.

$(document).ready(function() {

  $("#add_test").on("click", function() {
    var input = '<div class="flavhey"><div class="flavourInput"><input class="ftext form-control flavour-name-input" type="text" name="flav-name-input" value="" placeholder="Flavour Name" /><div class="suggestion-box"></div></div></div>';
    $('#tester').append(input);
  });


  $(document).on('keyup', '.flavhey input', function(e) {
    var token = "[token]";
    var search = $(this).val();

    var box = $(e.target).next(".suggestion-box");
    box.show();
    box.html("TestData");
    box.css("background", "#FFF");

    return false;
  });

  $(document).on("click", ".search-flavour", function(e) {
    e.preventDefault();
    $(this).closest('.flavourInput').find('.flavour-name-input').val($(this).text());
    $('.suggestion-box').hide();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester"></div>
<button id="add_test">ADD</button>

<ul>
  <li class="search-flavour">
    <b>flavour_name_1</b> - <i>flavour_company_name_1</i>
  </li>
  <li class="search-flavour">
    <b>flavour_name_2</b> - <i>flavour_company_name_2</i>
  </li>
  <li class="search-flavour">
    <b>flavour_name_3</b> - <i>flavour_company_name_3</i>
  </li>
</ul>

Now being able to execute your code I was able to reproduce the described error.
Please try to provide a runnable example next time.

I realized that your box was only appearing once because the call to .show() wasn't working at all.
It was visible from the beginning just without any content so you couldn't see it, then after setting html() it had content and it looked like the call to show() worked as intended.

Afer you clicked on a .search-flavour all boxes were correctly hidden and thus never appeared again.

So to fix this, replace the success handler of the ajax request with this:

success: function(data){
    // e.target is the currently active input element
    var box = $(e.target).next(".suggestion-box");
    box.show()
       .html(data)
       .css("background", "#FFF");
}

</div>