Text Field 入力補完:Autocomplete
Javascript使用、別途route、Controller側にDB検索して、結果をjsonにて返すソースを追加必要ある(省略)。
<script type="text/javascript">
$(function() {
$( "#allergy" ).autocomplete({
source: "{{ route('autoAllergy') }}",
minLength: 1,
select: function(event, ui) {
$('#allergy').val(ui.item.value);
}
});
});
></script>
Text Field 動的増減&入力補完:Dynamic Add/Remove
jQuery使用、動的増減&入力補完、入力補完のソースが動的増減ソースに埋め込む。別途blade側にjquery-ui.css、jQuery-2.1.4.min.js(他のバージョンでもよいか)、jquery-ui.js、またinputタグのclassなど追加必要ある(省略)。
<script type="text/javascript">
var $i = 0;
$(".addmore").on("click", function () {
if($i > 20) alert('注意:最大20行まで追加できます');
else {
$(".addform").append("<div class='input-group control-group' style='margin-top:20px;width: 100%;'><input class='form-control' id='item"+$i+"' placeholder='削除は右側の-キーをクリックして下さい' name='value[]' type='text'><div class='input-group-btn'><button class='btn btn-default deleteform' type='button'><i class='fa fa-minus'></i></button></div></div>");
$( "#item"+$i).autocomplete({source: "{{ route('autoAllergy') }}", minLength: 1, select: function(event, ui) { $("#item"+$i).val(ui.item.value);} });
}
$i++;
});
$("body").on("click", ".deleteform", function () {
$(this).parent().parent().remove();
});
</script>
但し、views.allergys.createの際、AllergysController側storeで、validateの際、未入力か入力エラーのtext項目があった場合、create画面に戻って、動的増やしたtext fieldが表示されなくなる現象が確認した。別途、create1を作成するか、Inputにより分岐して、増やしたtext fieldを再描写するのか、手を施す必要がある。
ロボット・ドローン部品お探しなら