Слияние кода завершено, страница обновится автоматически
inputSelect: компонент поля выбора с возможностью ввода
inputSelect основан на компоненте form библиотеки layui и расширяет его функциональность для поля select, позволяя выполнять поиск по вводимому тексту.
Функции:
Исходная структура каталога выглядит следующим образом:
lib WEB-каталог (или подкаталог)
├─layui каталог исходного кода layui
├─layui_exts каталог расширений layui
│ ├─inputSelect компонент inputSelect — поле выбора с возможностью ввода
│ │ └─inputSelect.js
Должен быть заключён в элемент form и иметь класс layui-form.
Элемент, содержащий select, должен иметь классы inputSelect и layui-form.
Не добавляйте атрибут lay-verify="required" к элементу select, это может привести к конфликту.
Этот компонент основан на форме, не изменяйте способ использования исходной формы.
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">Поле выбора</label>
<div class="layui-input-block inputSelect layui-form">
<select name="city">
<option value=""></option>
<option value="0">Пекин</option>
<option value="0">Пекин 2</option>
<option value="1">Шанхай</option>
<option value="2">Гуанчжоу</option>
<option value="3">Шэньчжэнь</option>
<option value="4">Ханчжоу</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">Отправить немедленно</button>
<button type="reset" class="layui-btn layui-btn-primary">Сбросить</button>
</div>
</div>
</form>
<script>
//Обратите внимание: зависит от компонента form
layui.config({
base: './lib/layui_exts/',
}).extend({
inputSelect: 'inputSelect/inputSelect'
}).use(['form', 'inputSelect'], function () {
var form = layui.form,inputSelect = layui.inputSelect;
});
</script>
Если элемент select содержит атрибут lay-data, он автоматически выполняет удалённый поиск, передавая данные в формате JSON.
Удалённый доступ возвращает JSON:
{
"status":200,
"msg":"success",
"data":[
{"name":"Пекин","value":1},
{"name":"Пекин 2","value":2},
{"name":"Пекин 3","value":3}
]
}
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">Поле выбора</label>
<div class="layui-input-блок inputSelect layui-form">
<select name="city" lay-data="{method:'post',url:'/admin/config/test',field:'city'}">
<option value=""></option>
<option value="0">Пекин</option>
<option value="0">Пекин 2</option>
<option value="1">Шанхай</option>
<option value="2">Гуанчжоу</option>
<option value="3">Шэньчжэнь</option>
<option value="4">Ханчжоу</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-блок">
<button class="layui-btn" lay-submit lay-filter="formDemo">Отправить немедленно</button>
<button type="reset" class="layui-btn layui-btn-primary">Сброс</button>
</div>
</div>
</form>
<script>
//Обратите внимание: зависит от компонента form
layui.config({
base: './lib/layui_exts/',
}).extend({
inputSelect: 'inputSelect/inputSelect'
}).use(['form', 'inputSelect'], function () {
var form = layui.form,inputSelect = layui.inputSelect;
});
</script>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )