具有多个输入的Ajax实时搜索

Question

我正在将ajax实时搜索功能写入我的软件中。每个表单上都需要有多个 ajax 可搜索的输入。一切都很好，除了我希望结果列表显示在我当前正在搜索的输入正下方的悬停"p"元素中。现在，我在每个输入下方都有一个带有类="选项"的"p"来显示结果。当我输入时，结果显示在每个"p"中，即在每个输入下悬停。有没有办法只引用当前输入的子级，或者我是否需要使用一个单独的函数来显式引用

每个输入所需的值？我在互联网上尝试了很多儿童选择器选项，但没有一个有效。代码如下。谢谢你的建议。

$(document).ready(function() {
//sets the chosen value into the input
$( ".options").on( "click", function(event) {
var item =  $(event.target).text(); 
$('#acctname').val(item);//place chosed result into the acctname input
$('.options').hide();//hide result options after click
}); 
//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
var id = $(this).attr("id");
var val = $(this).val();
if (val === '') { //Validating, if "name" is empty.
$('div > p').html('').show();
}else {//If input is not empty.
$.ajax({
type: "POST",
url: "../model/ajax/livesearch.php",
data: {id: id, val: val},
success: function(html) {//place the result into the p element and set the proper css
$('div > p').html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
}
});
}
});
});

更新：这就是我的HTML表单的结构。

<form action= "../model/dataentry.php?formname=enter_deposit" method="POST" id="ajaxform" name="ajaxform">
<div class = "label"><p1>Revenue Account Name</p1></div><div class = "field"><input class = "textinput" type="input" name="acctname" id="acctname" value = ""  autocomplete="off">
<p class = "options"></p></div>
<div class = "label"><p1>Revenue Account Number</p1></div><div class = "field"><input class = "textinput" type="input" name="acctno" id="acctno" value = ""  autocomplete="off">
<p class = "options"></p></div>
<input class = "submit" name = "Submit" type = "button" id = "ajaxsubmit" value = "Submit"  >
<input class = "submit" name = "Close" type = "button" id = "close" value = "Close"  >
</div>
</form>

Answer 1

这是你要找的吗？ https://jqueryui.com/autocomplete/

Answer 2

我找到了这个问题的解决方案，以防有人好奇。通过为每个带有类"option"的div分配一个等于其父级id加上"_opt"的id(即"acctname"输入将有一个id为"acctname_opt"的子div(，我可以在我的函数中动态编辑div ids，将结果列表放置在我想要的位置。这是我的新JavaScript代码。完美无瑕。谢谢大家的帮助。

$(document).ready(function() {
//sets the chosen value into the input
$( ".options").on( "click", function(event) {
var item =  $(event.target).text(); 
var clickedid = $(this).attr('id'); 
var targetid = clickedid.split('_'); //remove the '_opt' suffice to get the target id
$('#' + targetid).val(item);//place chosed result into the acctname input
$('.options').hide();//hide result options after click
}); 
//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
var id = $(this).attr("id");
var optid = id + '_opt'; //set the target element id
var val = $(this).val();
if (val === '') { //Validating, if "name" is empty.
$('#' + optid).html('').show();
}else {//If input is not empty.
$.ajax({
type: "POST",
url: "../model/ajax/livesearch.php",
data: {id: id, val: val},
success: function(html) {//place the result into the p element and set the proper css
$('#' + optid).html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
}
});
}
});
});