layui常用的表单标签_layui框架常用输入框介绍
一、普通输入框 input
二、自动完成式输入框
1、确保 layui 引入了 autoComplete 插件。
2、确保初始化代码运行于 layui.use 的回调函数里。
3、引入 baseUtility.js。
HTML@* 备案网点 *@
js 数据源初始化
需定义在 layui.use 的回调函数中。// 备案网点siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");
一个是输入框的 id, 一个是隐藏域的 id。
该 GetAllSiteByKey 公共函数已定义在 baseUtility.js 中。
获取其值// 收集 查询表单数据var serializeForm = $("#searchForm").formSerialize(true);
该序列化方法可以获取隐藏域的 id 值。
实现方式(参考)/* 获取全部的网点 @param txtElementId 输入框Id @param hiddenElementId 与输入框匹配的隐藏域Id */GetAllSiteByKey: function (txtElementId, hiddenElementId) { $(txtElementId).typeahead({ minLength: 0, //items: 'all', source: function (query, process) { var xdata = []; console.group('查询条件 = ' + query); $.ajax({ type: "GET", url: urlEnum.GetAllSiteByKey, async: false, data: { "q": query }, success: function (result) { console.info('GetAllSiteByKey result'); console.info(result); if (result != null && result != undefined) { $.each(result.list, function (i, item) { xdata.push({ id: item.value, name: item.key, obj: item }); }); // end each } }, error: function (XMLHttpRequest, textStatus, errorThrown) { // layer.msg("数据加载失败", { icon: 1 }); }, timeout: 5000 }); console.info('Auto 返回值:'); console.info(xdata); // 如果 Auto 控件被用户置空则同时将隐藏域也置空 if ($(txtElementId).val() == "") { $(hiddenElementId).val(""); } console.groupEnd(); return process(xdata); }, updater: function (item) { console.info('updater = ' + item); console.info(item); $(hiddenElementId).val(item.id); return item; } }); // end typeahead}
三、赋值
无论输入框是普通的还是自动完成的,都可以直接赋值// 备案网点$("#txtRegisterCompanyId_editForm").val(registerCompanyName);
更多layui知识请关注layui使用教程栏目。
layui常用的表单标签_layui框架常用输入框介绍相关推荐
- layui常用的表单标签_Layui常用组件:表格(table)
快速使用 添加 删除 编辑 查看 编辑 删除 layui.use(['table'], function () { table.render({ elem: '#demo' ,url: 'url'// ...
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- Struts2中UI标签之表单标签介绍
1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.che ...
- oracle数据库表单,Oracle常用数据库系统表单以及SQL的整理
因为最近涉及到了一些数据库的归档,备份等工作,所以一部分的重心放在了数据库上,毕竟之前对数据库的了解也只停留在了一般的建表,查询,最多最多再写一写触发器之类的东西. 通常都是自己瞎搞搞,也就懂一点皮毛 ...
- java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
- input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架
目录 表格标签 表单标签 action标签 input标签 select标签 textarea标签 form表单提交文件需要注意 flask框架 1.表格标签 <!DOCTYPE html> ...
- HTML学习二_HTML常用的行级标签,常用实体字符及表单标签
HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...
- HTML常用标签及表单标签
HTML初识 HTML(Hpyer Text Markup Language的缩写)译为"超文本标签语言",用来描述网页的一种语言.所谓超文本,因为它可以加入图片.声音.动画.多媒 ...
- 表单标签的作用、常用的表单控件
1.1 表单标签的作用 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
最新文章
- 点云滤波/分割/关键点提取/配准/识别/重建教程
- git恢复到上次提交
- 3.2 使用pytorch搭建AlexNet并训练花分类数据集
- Ubuntu 及其衍生版安装使用录屏工具【SimpleScreenRecoder】
- 启动ubuntu无反应_推荐一款优秀的Python IDE以及在Ubuntu下的安装
- 逻辑智力题【更新中】
- jquery datatable的详细用法
- SQL内部连接3个表?
- 用perl操作excel的介绍
- [转] 各种数据类型转换
- rpm数据库异常问题总结
- html svg 编辑器
- Hbase与Hadoop版本对应
- 如何设计一个网络程序
- 电脑复制粘贴不了怎么办?
- nba2k online名字大全
- 从零开始搭建免费小程序商城
- Windows系统介绍
- (比较器)Comparator比较器
- 搜索引擎蜘蛛的基本原理