最初は、すべてのスマート提案 div が非表示になっています。ユーザーがクリックした最も近い「prod-name-container」divに属する「smart-suggestions」divを表示しようとしています。closest() と find() を使用してみましたが、機能しませんでした。なぜ機能しないのかわかりません。
マークアップ
for($i=0; $i < 20; $i++){
echo '
<div class="invoice-line">
<div class="index">'.($i+1).'</div>
<div class="prod-id"><input type="text" id="prod-id"></div>
<div class="prod-name-container">
<input onKeyPress="search(this.value)" type="text" class="prod-name"/>
<div class="smart-suggestions">
<!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
</div>
</div>
<div class="qty">1</div>
</div>';
}
JQuery
$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
$last = $(this);
$('.invoice-line').closest(".prod-name-container").find('.smart-suggestions').show();
});