Выпадающий список на заполнителя в начальной загрузке и Laravel
Я работаю над Веб-сайт в котором я хочу разместить раскрывающийся список клик заполнителя. HTML-код, который я использовал для размещения заполнителя:
<div class="col-3 pt-4 input_hello_all">
<input type="text" class="form-control" placeholder="hello/all">
</div>
Выпадающий список будет извлечен из базы данных my-sql из таблицы приветствия из имя столбца. Имя столбца имеет следующий список элементов:
- Фильмы
- Музыка
- Entertaiment
Я буду вводить имя $ category-> в заполнителя для того, чтобы получить данные из базы данных из привет таблица / имя столбца.
Постановка задачи:
Мне интересно, какие изменения я должен внести в код HTML, чтобы при нажатии на заполнитель всем привет от играть на скрипке, выпадающий список создается с элементами Кино, Музыка, Развлечения.
Решение
Простейшим вариантом было бы использовать <select> элемент. На ваш взгляд, вы можете использовать что-то вроде:
<select id="mySelect" name="mySelect">
@foreach($categories as $category)
<option>{{$category->name}}</option>
@endforeach
</select>
Если вы хотите сделать это асинхронно, вы можете использовать (при условии, что у вас есть доступ к jquery, поскольку вы пометили это с помощью twitter-bottstrap, а jquery является обязательным условием)
// IN YOUR VIEW
<select id="mySelect" name="mySelect">
</select>
$(document).ready(function(){
$('#mySelect').click(function(){
$.ajax({
url: '/your/route',
type: 'GET',
//data: 'optionalParameter=' + someVar,
success: function(data){
// You could generate the <option> markup on
// server and just return it as one string
// replacing the html of #mySelect
$('#mySelect').html(data);
// Or return it as json and loop through it
// buildling the <option> markup clientside
$('#mySelect').html(''); //clear any existing options
$.each(data, function(k,v){
$('#mySelect').append($('<option></option>').html(v)));
});
}
});
});
});
Я не проверял ничего из этого, но это довольно просто. Если вы не можете использовать текстовое поле … вы можете посмотреть в автозаполнение jquery-ui, но вещи как таковые, как правило, предназначены для значений, которые могут быть выбраны ИЛИ введены пользователем.
Другие решения
В вашем HTML-коде вы можете использовать простое текстовое поле, а с помощью JavaScript вы можете удалить текстовое поле и добавить раскрывающийся список.
В HTML,
<div id="appendData" class="col-3 pt-4 input_hello_all">
<input id="inputPlace" type="text" class="form-control" placeholder="hello/all">
</div>
В JavaScript для динамических данных:
<script>
$(document).ready(function(){
$(document).on('click','#inputPlace',function(e){
$.ajax({
url: '/your/url',
type: 'GET',
success: function(data){
var optionList = '';
$('#appendData').html('<select id="selectionList" class="form-control"></select>');
$.each(data, function(key,value){
optionList += '<option value="'+key+'">'+value+'</option>';
});
$('#selectionList').html(optionList);
}
});
})
});
</script>
Используя это, вы можете динамически преобразовывать текстовое поле в выпадающий список с помощью ajax.
Пример статических данных:
<script>
$(document).ready(function(){
$(document).on('click','#inputPlace',function(e){
var optionList = '';
$('#appendData').html('<select id="selectionList" class="form-control"></select>');
optionList = '<option value="1">Movies</option><option value="2">Music</option><option value="3">Entertainment</option>';
$('#selectionList').html(optionList);
})
});
</script>