使用jquery+layui 做一个输入搜索下拉 类似lay-search
效 果:
因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西。
一开始使用lay-search 的控件去弄。 但是无法控制里面的内容。所以用了一些笨方法去弄
废话不说了,
html部分:
<div >
<input type="text" name="HandoverCompany" id="HandoverCompany" onchange="checkInputValueLow(this)" class="layui-input" placeholder="请输入检查单位" style="position:absolute;z-index:2;width: 78%;border-right: 0px;" lay-verify="required" value="" onkeyup="search()" autocomplete="off">
<select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>
</select>
</div>
css部分:
.border-left-st{
border-left:1px solid red;
}
.border-top-st{
border-top:1px solid red;
}
.border-bottom-st{
border-bottom:1px solid red;
}
.borderRed{
border:1px solid red;
}
js+layui部分:
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
form.on('select(hc_select)', function (data) { //选择移交单位 赋值给input框
console.log(data);
console.log(optionValue[data.value].regAddress);
$("#HandoverCompany").val(optionValue[data.value].enterpriseName);
$("#enterpriseAddress").val(optionValue[data.value].regAddress);
$("#enterpriseId").val(optionValue[data.value].enterpriseId);
$("#hc_select").next().find("dl").css({ "display": "none" });
form.render();
});
window.search = function () {
var value = $("#HandoverCompany").val();
$("#hc_select").val(value);
console.log(value)
form.render();
$("#hc_select").next().find("dl").css({ "display": "block" });
var dl = $("#hc_select").next().find("dl").children();
var j = -1;
for (var i = 0; i < dl.length; i++) {
if (dl[i].innerHTML.indexOf(value) <= -1) {
dl[i].style.display = "none";
j++;
}
if (j == dl.length-1) {
$("#hc_select").next().find("dl").css({ "display": "none" });
}
}
}
//一定要用延迟 不然会选取不到内容
$("#HandoverCompany").blur(function(){
setTimeout(
function(){$("#hc_select").next().find("dl").css({ "display": "none" });},100
)
});
$("#HandoverCompany").focus(function(){
$("#hc_select").next().find("dl").css({ "display": "block" });
});
});
控制显示等部分
function addProblemCol(){
$("#problemTable").append('<tr><td onclick="cutProblemCol(this)" class="cutPotiner">移除问题</td><td><input type="text" name="problemInfo" id="problemInfo" lay-verify="problemInfo" autocomplete="off" placeholder="请输入问题详情" class="layui-input addProblemCount" maxlength="60" ></td</tr>')
}
function cutProblemCol(obj){
$(obj).parent().remove();
}
function checkInputValue(obj){
if($(obj).val()!='')
{
$(obj).removeClass("borderRed");
}
}
function checkInputValueLow(obj){
$(obj).removeClass("border-left-st");
$(obj).removeClass("border-bottom-st");
$(obj).removeClass("border-top-st");
$("input").each(function(index,element){
if(index ==1)
{
//$(element).attr("border","none");
}
})
}
$("#HandoverCompany").on('compositionstart',function(){
keyFlag = false;
})
$('#HandoverCompany').on('compositionend',function(){
keyFlag = true;
})
判断输入状态调取后台部分
var optionValue = [];
$("#HandoverCompany").on('input',function(){
var value = $("#HandoverCompany").val();
console.log("123123123");
if(value.length>2 && keyFlag )
{
console.log(value.length)
console.log(keyFlag)
$.ajax({
type:"post",
url:"写入自己后台的地址",
cache:false,
async:true,
data:{你的参数},
success:function(data){
$("#hc_select").empty();
optionValue=[];
$(data).each(function(index,element){
optionValue.push(element);
$("#hc_select").append('<option value='+index+'>'+element.enterpriseName+'</option>');
});
}
});
}
});
提交判断看情况。 因为这里是使用的parent.xxx.open,弹窗在最上层 , 常规判断 不变就是提示的部分改了
if($(enterpriseName).val()==null || $(enterpriseName).val().trim()=='')
{
parent.layer.msg("请输入被检查单位名称");
//非主流写法 不可再用... 需要确定input的位置不会变
$(inputTag).each(function(index,element){
if(index == 0)
{
$(element).addClass("border-left-st");
$(element).addClass("border-top-st");
$(element).addClass("border-bottom-st");
}
if(index==1)
{
$(element).addClass("borderRed");
}
});
return false;
}
使用jquery+layui 做一个输入搜索下拉 类似lay-search的更多相关文章
- layui-table-column-select(layui数据表格可搜索下拉框select)
layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...
- jquery+php实现用户输入搜索内容时自动提示
index.html <html> <head> <meta charset=;} #search_auto li a:hover{background:#D8D ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- jQuery实现一个淡入淡出下拉菜单 非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug
前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...
- 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值
Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...
随机推荐
- 读取excel等文件根据注解自动装填为实体类
问题:以前每次读取excel 都是根据第几列来装填实体类里面的属性.写起来很麻烦.还要判断. 思路: 1.因为每次读取excel 或者word表格 都能得到是第几列的数据,那么可以知道每列数据的ind ...
- 达梦数据库manager工具坑
领导突然说要用达梦的数据库,对此完全没有了解. 安装没有问题. 但是这个工具真的坑到了. 因为之前用的都是navicat 干mysql ,创建数据的时候默认执行了. 但是这个工具tool/manage ...
- 【坑】 centos 7.6 使用ssh 秘钥登录遇到的问题
问题: 我在master1上面创建了一个ssh的秘钥文件,通过ssh-copy-id 传送四台主机,然后使用ansible all -m ping 发现有台机器就是有问题 这是怎么回事???一样的配置 ...
- ES5 绑定 this 的方法
this的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊.有时,需要把this固定下来,避免出现意想不到的情况.JavaScript 提供了call.apply ...
- DOS命令操作
打开CMD的方式 1.开始+系统+命令提示符 2.Win键+R 输入CMD打开控制台(推荐使用) 3.在任意的文件夹下面,按住shift+鼠标右键点击,在此处打开命令行窗口 4.资源管理器的地址栏前面 ...
- Python学习笔记(三)数据类型转换
一.输入输出函数 1.input() 输入函数,内置函数,用来获取用户输入数据,返回值为字符串 运行到此函数会阻塞或暂停程序 示例: 1 str_data = input('请输入数据:') 2 st ...
- OnMicro BLE应用方案|蓝牙语音遥控器-OM6621E
随着物联网技术不断发展,家用电器往智能化方向持续迭代,使用红外遥控器这种传统的互动方式已经满足不了实际的使用需求,蓝牙语音遥控器作为人机交互新载体,逐渐取代传统红外遥控器成为家居设备的标配. 相比于传 ...
- rust 配置国内源,加速
[source.crates-io] registry = "https://github.com/rust-lang/crates.io-index" # 指定镜像 replac ...
- python代码规范PEP8
1.引言 本文档给出了 Python 编码规约,主要 Python 发行版中的标准库即遵守该规约.对于 C 代码风格的 Python 程序,请参阅配套的 C 代码风格指南. 本文档和 PEP 257( ...
- SQL自动生成表结构Excel说明文档
针对已经存在表结构,快速生成整理表结构文档. SELECT字段中文名 = isnull(G.[value],''),字段名 = A.name,类型 = B.name,标识 = Case When CO ...