[英]How to create a searchable select option form in laravel blade
我正在嘗試構建一個帶有可搜索選項的城市 select 選項表單。 到目前為止,我已經構建了這個,但是沒有保存選定的數據,而且我的代碼仍然缺少搜索功能。
{!! Form::select('custom_field1', array('Delhi', 'Goa'), '1', ['class' => 'form-control', 'placeholder' => 'Select City']); !!}
原始代碼
<div class="col-md-3">
<div class="form-group">
{!! Form::label('custom_field1', $contact_custom_field1 . ':') !!}
{!! Form::text('custom_field1', null, ['class' => 'form-control', 'placeholder' => $contact_custom_field1]); !!}
</div>
你可以使用<input>
的list
屬性和<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>
這將允許傳遞任何文本輸入,因此您需要進行一些額外的驗證。
$('#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();
}
});
或者,由於您已使用 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
class 添加到您的 select。
<select name="custom_field1" class="form-control select2" placeholder="Select City" required>
<option>Delhi</option>
<option>Goa</option>
</select>
然后,在您的 javascript 中,將其添加到您的$(document.ready(...)
塊中。
$(document).ready(function() {
$('.select2').select2();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.