Ajax Live Search с несколькими входами
Я пишу функцию поиска в реальном времени ajax в моем программном обеспечении. Есть несколько входов, которые должны быть доступны для поиска ajax в каждой форме. Все отлично работает, за исключением того, что я хочу, чтобы список результатов отображался в виде парящего элемента «p» прямо под входом, в котором я сейчас ищу. Прямо сейчас у меня есть «p» с class = «options» прямо под каждым входом для отображения результаты, достижения. Когда я печатаю, результаты отображаются КАЖДЫМ «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>
Решение
Это то, что вы ищите?
https://jqueryui.com/autocomplete/
Другие решения
Я нашел решение проблемы на тот случай, если кому-то станет интересно. Назначая каждому div с классом «option» идентификатор, равный идентификатору его родителя плюс «_opt» (т. Е. Вход «acctname» будет иметь дочерний div с идентификатором «acctname_opt»), я могу динамически редактировать идентификаторы div в своих функциях, чтобы разместить список результатов, где я хочу это. Вот мой новый код 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"});
}
});
}
});
});