Jus*_*fys 4 php forms jquery laravel
我正在尝试构建一个带有可搜索选项的城市选择选项表单。到目前为止，我已经构建了这个，但是所选的数据没有被保存，并且我的代码仍然缺乏搜索功能。
{!! Form::select('custom_field1', array('Delhi', 'Goa'), '1', ['class' => 'form-control', 'placeholder' => 'Select City']); !!}
原始代码
{!! Form::select('custom_field1', array('Delhi', 'Goa'), '1', ['class' => 'form-control', 'placeholder' => 'Select City']); !!}
IGP*_*IGP 10
您可以使用<input>slist属性并<datalist>仅用 html 来实现您想要做的事情
<div class="col-md-3">
<div class="form-group">
<label for="custom_field1">{{ $contact_custom_field1 }}:</label>
<input id="custom_field1" name="custom_field1" type="text" list="custom_field1_datalist" class="form-control" placeholder="{{ $contact_custom_field1 }}">
<datalist id="custom_field1_datalist">
<option>Delhi</option>
<option>Goa</option>
</datalist>
<span id="error" class="text-danger"></span>
</div>
</div>
这将允许任何文本输入通过，因此您需要一些额外的验证。
<div class="col-md-3">
<div class="form-group">
<label for="custom_field1">{{ $contact_custom_field1 }}:</label>
<input id="custom_field1" name="custom_field1" type="text" list="custom_field1_datalist" class="form-control" placeholder="{{ $contact_custom_field1 }}">
<datalist id="custom_field1_datalist">
<option>Delhi</option>
<option>Goa</option>
</datalist>
<span id="error" class="text-danger"></span>
</div>
</div>
或者，由于您已经使用 JQuery 标签标记了这个问题，因此您可以使用类似的库select2并让它为您做这件事。
您只需将其放入您的<head>标签中
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
将select2课程添加到您的选择中。
$('#your-form-id').on('submit', e => {
$('#error').empty();
let form = $(e.target);
let validOptions = form.find('#custom_field1_datalist option').map((key, option) => option.value).toArray();
let customField1Value = form.find('input[name=custom_field1]').eq(0).val();
// check if custom_field_1's value is in the datalist. If it's not, it's an invalid choice
if ( !(validOptions.indexOf(customField1Value) > -1) ) {
// show error
$('#error').text('Invalid Choice');
// prevent form submission (you should still validate in the backend)
e.preventDefault();
}
});
然后，在您的 javascript 中，将其添加到您的$(document.ready(...)块中。
$(document).ready(function() {
$('.select2').select2();
});
| 归档时间： |
|
| 查看次数： |
11111 次 |
| 最近记录： |