如何在Jquery，Laravel中为动态输入执行自动完成
[英]How to do autocomplete for Dynamic Inputs in Jquery, Laravel
问题描述
I am doing Accounts Project in Laravel. 
我正在Laravel进行Accounts Project。 In Payments Entry Screen, i want to add multiple ledger in this screen using autocomplete. 在付款输入屏幕中，我想使用自动完成功能在此屏幕中添加多个分类帐。 i do autocomplete only first field based on id. 我只会根据ID自动完成第一个字段。 How to do Remaining Field based on dynamic id or suggest any good method. 如何根据动态ID执行“剩余字段”或提出任何好的方法。
<table class="table table-bordered" style="margin-bottom:0px;">
<tr>
<td width="50%">
<input type="text" class="form-control boxed" name="transledger[]" id="transledger1" ></td>
<td width="50%">
<input type="text" class="form-control boxed" name="creditamt[]" id="creditamt1">
</td>
</tr>
<tr>
<td width="50%">
<input type="text" class="form-control boxed" name="transledger[]" id="transledger2" ></td>
<td width="50%">
<input type="text" class="form-control boxed" name="creditamt[]" id="creditamt2">
</td>
</tr>
<tr>
<td width="50%">
<input type="text" class="form-control boxed" name="transledger[]" id="transledger3" ></td>
<td width="50%">
<input type="text" class="form-control boxed" name="creditamt[]" id="creditamt3">
</td>
</tr>
.......
...........
...........
..........
</table>
autocomplete Query 自动完成查询
<script>
$(document).ready(function() {
src = "{{ url('searchajax') }}";
$("#transledger1").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term : request.term
},
success: function(data) {
response(data);
}
});
},
minLength: 3,
});
});
</script>
1 个解决方案
解决方案1
0 2017-06-08 12:06:57
This example shows you how you can use autocomplete. 此示例说明如何使用自动完成功能。
https://jqueryui.com/autocomplete/ is a great resource to implement "autocomplete". https://jqueryui.com/autocomplete/是实现“自动完成”的重要资源。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "Javascript", "Jquery", "Vue.js", "Meteor.js", ]; $( "#automp" ).autocomplete({ source: availableTutorials }); }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type "m" or "j"</p> <label for = "autocomp">Tags: </label> <input id = "automp"> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.