我搜索并尝试了许多关于stackoverflow的决定,但是我找不到我的问题的答案。我试图从数据库自动完成输入值。
仅对第一行有效。如果我使用jquery动态添加新行,它不会自动完成功能。
我的HTML表单:
<form name="form1" id="mainForm" method="post"enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div class="card-body">
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label></div>
<div class="col-12 col-md-10">
<div class="input-group fieldGroup">
<input type="text" id="hiddenID" name="hiddenID[]" class="form-control" placeholder="ID Товара"/>
<input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" />
<input type="text" id="prod_count" name="prod_count[]" class="form-control" placeholder="Кол-во"/>
<input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>+</a>
</div>
</div>
</div>
</div>
<div class="row form-group" style="display: none;">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label></div>
<div class="col-12 col-md-10">
<div class="input-group fieldGroupCopy">
<input type="text" id="hiddenID" name="hiddenID[]" class="form-control" placeholder="ID Товара"/>
<input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" />
<input type="text" id="prod_count" name="prod_count[]" class="form-control" placeholder="Кол-во"/>
<input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена"/>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>-</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<input type="submit" id="submit" class="btn btn-primary" value="Оприходовать">
<input type="reset" id="reset" class="btn btn-danger" value="Очистить форму">
</div>
</form>
JavaScript
// Add new rows
jQuery(document).ready(function(){
//group add limit
var maxGroup = 30;
//add more fields group
jQuery(".addMore").click(function(){
if(jQuery('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="input-group fieldGroup">'+jQuery(".fieldGroupCopy").html()+'</div>';
jQuery('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Максимально можно добавить '+maxGroup+' товаров.');
}
});
//remove fields group
jQuery("body").on("click",".remove",function(){
jQuery(this).parents(".fieldGroup").remove();
});
});
// Autocomplete
jQuery('.autoc').on("focus", function(){
jQuery(this).autocomplete({
minLength: 2,
source: "autocomplete_name.php",
select: function( event, ui ) {
event.preventDefault();
jQuery("#prod_id").val(ui.item.label);
jQuery("#hiddenID").val(ui.item.id);
}
});
});
How its works on my site... (picture)
在每一行中,我要自动完成2个输入: 1)给prod_id贴标签 2)要hidden_id从数据库放入ID
我不要求别人为我做这项工作。感谢您的帮助。
PS:对于我的英语不好,我深表歉意...
答案 0 :(得分:0)
在您的Jquery函数中像这样发送数据
<script type="text/javascript">
$("#youid").typeahead({name: 'indexAutoSuggestCat',remote :'autocomplete_name.php?query=%QUERY&action=autoSuggestCategoryList',minLength:1});
clearConsole();
</script>
并返回数据json,因此请使用echo json_encode($data);
答案 1 :(得分:0)
最后,我将代码更改为此并且可以正常工作。如果有人需要此代码,则可以使用以下代码:
HTML:
<form name="form1" id="mainForm" method="post"enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div class="card-body">
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Продавец:</label></div>
<div class="col-12 col-md-10">
<select name="seller" id="seller" class="form-control">
<?php echo get_select_options_legals('ur_name_short', 'ur_inn'); ?>
</select>
<small class="form-text text-muted">Выберите юридического лицо, от которого будет осуществлена продажа.</small>
</div>
</div>
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Клиент:</label></div>
<div class="col-12 col-md-10">
<input hidden type="text" name="client_id" id="client_id" class="form-control" placeholder="Введите данные клиента"/>
<input type="text" name="client_name" id="client_name" class="autoc_client form-control" placeholder="Введите данные клиента"/>
<small class="form-text text-muted">Если клиента нет в базе, сначала <mark><a href="/crm/clients/add_client.php" target="_blank">необходимо его создать</a></mark>. (откроется в новой вкладке)</small>
</div>
</div>
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Товар:</label><small class="form-text text-muted">Примечание: Сначала заполняем строку, потом добавляем новую...</small></div>
<div class="col-12 col-md-10 input_fields_wrap">
<div class="input-group">
<input hidden type="text" id="hidden_ID" name="hidden_ID[]" class="form-control" placeholder="ID Товара"/>
<input type="text" id="prod_id" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" required />
<input type="text" id="prod_count" name="prod_count[]" class="count_input form-control" placeholder="Кол-во" required/>
<input type="text" id="product_price" name="prod_price[]" class="form-control" placeholder="Цена" required/>
<button class="btn btn-success add_field_button">+</button>
</div>
</div>
</div>
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Скидка:</label></div>
<div class="col-12 col-md-10">
<input type="text" name="discount" id="discount" class="form-control" placeholder="Скидка в рублях"/>
</div>
</div>
<div class="row form-group">
<div class="col col-md-2"><label for="text-input" class=" form-control-label">Магазин:</label></div>
<div class="col-12 col-md-10">
<select name="select" id="select" class="form-control">
<?php echo get_select_options('shops', 'shop_name'); ?>
</select>
</div>
</div>
</div>
<div class="card-footer">
<input type="submit" id="submit" class="btn btn-success" value="Добавить продажу">
</div>
</form>
Javascript:
// Подсчет кол-ва товаров
jQuery(document).on("change", ".count_input", function() {
var sum = 0;
jQuery(".count_input").each(function(){
sum += +jQuery(this).val();
});
jQuery(".count_input_total").val(sum);
});
// Добавление новых строк
jQuery(document).ready(function() {
var max_fields = 50; //maximum input boxes allowed
var wrapper = jQuery(".input_fields_wrap"); //Fields wrapper
var add_button = jQuery(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
jQuery(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
jQuery(wrapper).append('<div class="input-group"><input type="text" hidden id="hidden_ID_' + x + '" name="hidden_ID[]" class="form-control" placeholder="ID Товара"/><input type="text" id="prod_id_' + x + '" name="prod_id[]" class="autoc form-control" placeholder="Товар" autocomplete="off" required /><input type="text" id="prod_count_' + x + '" name="prod_count[]" class="count_input form-control" placeholder="Кол-во" required /><input type="text" id="prod_price_' + x + '" name="prod_price[]" class="form-control" placeholder="Цена" required /><a href="#" class="btn btn-danger remove_field">-</a></div>'); //add input box
jQuery( "input[id='prod_id_"+ x +"']" ).autocomplete({
source: "autocomplete_name.php",
select: function( event, ui ) {
event.preventDefault();
jQuery("#prod_id_"+ x +"").val(ui.item.value);
jQuery("#hidden_ID_"+ x +"").val(ui.item.id);
}
});
}
});
jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); jQuery(this).parent('div').remove(); x--;
})
});
// Включаем автокомплит
jQuery(function() {
jQuery( "input[name^='prod_id']" ).autocomplete({
source: "autocomplete_name.php",
select: function( event, ui ) {
event.preventDefault();
jQuery("#prod_id").val(ui.item.value);
jQuery("#hidden_ID").val(ui.item.id);
}
});
});
// Автокомлит клиента
jQuery('.autoc_client').on("focus", function(){
jQuery(this).autocomplete({
minLength: 2,
source: "autocomplete_client.php",
select: function( event, ui ) {
event.preventDefault();
jQuery("#client_name").val(ui.item.label);
jQuery("#client_id").val(ui.item.id);
}
});
});