Gleb
Reputation: 11
Jquery autocomple for multiple fields (created dynamicly)
I search and try many decisions on stackoverflow, but I cound not find the answer to my question. I tried to autocomplete input values from database.
It's works okay only to first row. If i add new row dynamicly with jquery, it doesnt do autocomplete function.
My HTML form:
<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)
In each row i want to autocomplete 2 inputs: 1) To prod_id put label 2) To hidden_id put id from DB
I do not ask someone to do the job for me.... just a working example. Thanks for helping.
PS : I apologize for my bad english...
Upvotes: 0
Views: 94
Answers (2)
Gleb
Reputation: 11
Finally i change my code to this and it works. If someone need this, you can use following code:
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);
}
});
});
Upvotes: 1
Vincent
Reputation: 53
In Your Jquery Function send the data Like this
<script type="text/javascript">
$("#youid").typeahead({name: 'indexAutoSuggestCat',remote :'autocomplete_name.php?query=%QUERY&action=autoSuggestCategoryList',minLength:1});
clearConsole();
</script>
And return the data json so use echo json_encode($data);
Upvotes: 1
Related Questions
- Jquery autocomplete multiple dynamic input array
- autocomplete input fields - JS
- How to make autocomplete for form dynamic
- jquery autocomplete with more items in the same fields
- How to add autocomplete to dynamically created inputs?
- autocomplete with dynamically generated fields
- Jquery multiple autocomplete field
- Autocomplete multiple field values
- jQuery autocomplete: How to complete multiple fields when entering data into one of them?
- jQuery autocomplete on multiple fields