yutons_sug搜索框提示插件||输入框提示插件
2024-06-07 04:36:15
样例：
引用的js文件：
/*** @Title：搜索框提示插件||输入框提示插件 --只有干部任免列表中使用其他地方使用的是yutons-mods文件下yutons_sug.js* @Version：1.0.1*/
layui.define(['jquery', 'table'], function (exports) {var $ = layui.jquery,table = layui.table;var yutons_sug = function () {this.v = '1.0.1';};/*** yutons_sug搜索框提示插件||输入框提示插件初始化*/yutons_sug.prototype.render = function (opt) {opt.urlBak = opt.url;//设置默认初始化参数opt.type = opt.type || 'sug'; //默认sug，传入sug||sugTableopt.elem = "#yutons_sug_" + opt.id;opt.height = opt.height || '229';opt.cellMinWidth = opt.cellMinWidth || '80'; //最小列宽opt.page = opt.page || true;opt.limits = opt.limits || [3];opt.loading = opt.loading || true;opt.limit = opt.limit || 3;opt.size = opt.size || 'sm'; //小尺寸的表格//初始化输入框提示容器$("#" + opt.id).after("<div id='sugItem' style='background-color: #fff;margin-top: 38px;display: none;z-index:1;position: absolute;width:100%;'></div>");//输入框提示容器移出事件：鼠标移出隐藏输入提示框$("#" + opt.id).parent().mouseleave(function () {$("#" + opt.id).next().hide().html("");});if (opt.type == "sugTable") {//如果type为sugTable，则初始化下拉表格/* 输入框鼠标松开事件 */$("#" + opt.id).mouseup(function (e) {opt.obj = this;getSugTable(opt);})/* 输入框键盘抬起事件 */$("#" + opt.id).keyup(function (e) {opt.obj = this;getSugTable(opt);})} else if (opt.type == "sug") {//如果type为sug，则初始化下拉框$("#" + opt.id).next().css("border", "solid #e6e6e6 0.5px");/* 输入框鼠标松开事件 */$("#" + opt.id).mouseup(function (e) {opt.obj = this;getSug(opt);})/* 输入框键盘抬起事件 */$("#" + opt.id).keyup(function (e) {opt.obj = this;getSug(opt);})}}//搜索框提示插件||输入框提示插件--sugTable-下拉表格function getSugTable(opt) {//如果输入信息为"",则隐藏输入提示框,不再执行下边代码var keyword = $.trim($(opt.obj).val());//此处判断输入框是否有值 没有值直接终止。/*if (keyword == "") {$("#" + opt.id).next().hide().html("");return false;}*///下拉表格初始化table容器var html = '<table id="yutons_sug_' + opt.obj.getAttribute("id") + '" lay-filter="yutons_sug_' + opt.obj.getAttribute("id") +'"></table>';$("#" + opt.obj.getAttribute("id")).next().show().html(html);//下拉表格初始化opt.url = opt.urlBak + encodeURI(keyword);table.render(opt);//设置下拉表格样式$(opt.elem).next().css("margin-top", "0").css("background-color", "#ffffff");//监听下拉表格行单击事件（单击||双击事件为：row||rowDouble）设置单击或双击选中对应的行table.on('rowDouble(' + "yutons_sug_" + opt.id + ')', function (obj) {for (var param in opt.params) {//$("#" + param.name).val(obj.data[param.field])//此处修改---由原来的根据id设置value值变更为根据name设置value值$("*[name='"+param.name+"']").val(obj.data[param.field])}$("#" + opt.id).next().hide().html("");});}//搜索框提示插件||输入框提示插件--sug-下拉框function getSug(opt) {sessionStorage.setItem("inputId", opt.id)if (opt.idField != undefined && opt.idField != null) {sessionStorage.setItem("idField", opt.idField);}var keyword = $.trim($(opt.obj).val());if (keyword == "") {$("#" + opt.id).next().hide().html("");return false;}//sug下拉框异步加载数据并渲染下拉框$.ajax({type: "get",url: opt.urlBak + encodeURI(keyword),success: function (data) {var html = "";layui.each(data.data, function(index, item) {if (index >= opt.limit) {return;}//if (item[sessionStorage.getItem("inputId")].indexOf(decodeURI(keyword)) >= 0) {html +="<div class='item' style='padding: 3px 10px;cursor: pointer;' onmouseenter='getFocus(this)' onClick='getCon(this);' id='sug_" + sessionStorage.getItem("idField") + "' name='" + item[sessionStorage.getItem("idField")] + "'>" +item[sessionStorage.getItem("inputId")] + "</div>";//}});if (html != "") {$("#" + sessionStorage.getItem("inputId")).next().show().html(html);} else {$("#" + sessionStorage.getItem("inputId")).next().hide().html("");}}});}//搜索框提示插件||输入框提示插件--sug-下拉框上下键移动事件和回车事件$(document).keydown(function (e) {e = e || window.event;var keycode = e.which ? e.which : e.keyCode;if (keycode == 38) {//上键事件if ($.trim($("#" + sessionStorage.getItem("inputId")).next().html()) == "") {return;}movePrev(sessionStorage.getItem("inputId"));} else if (keycode == 40) {//下键事件if ($.trim($("#" + sessionStorage.getItem("inputId")).next().html()) == "") {return;}$("#" + sessionStorage.getItem("inputId")).blur();if ($(".item").hasClass("addbg")) {moveNext();} else {$(".item").removeClass('addbg').css("background", "").eq(0).addClass('addbg').css("background", "#e6e6e6");}} else if (keycode == 13) {//回车事件dojob();}});//上键事件var movePrev = function (id) {$("#" + id).blur();var index = $(".addbg").prevAll().length;if (index == 0) {$(".item").removeClass('addbg').css("background", "").eq($(".item").length - 1).addClass('addbg').css("background", "#e6e6e6");} else {$(".item").removeClass('addbg').css("background", "").eq(index - 1).addClass('addbg').css("background", "#e6e6e6");}}//下键事件var moveNext = function () {var index = $(".addbg").prevAll().length;if (index == $(".item").length) {$(".item").removeClass('addbg').css("background", "").eq(0).addClass('addbg').css("background", "#e6e6e6");} else {$(".item").removeClass('addbg').css("background", "").eq(index + 1).addClass('addbg').css("background", "#e6e6e6");}}//回车事件var dojob = function () {//如果未定义idField，则不添加idField字段var idField = sessionStorage.getItem("idField");if (idField != undefined && idField != null) {$("#" + sessionStorage.getItem("idField")).val($(".addbg").attr("name"))}var value = $(".addbg").text();$("#" + sessionStorage.getItem("inputId")).blur();$("#" + sessionStorage.getItem("inputId")).val(value);$("#" + sessionStorage.getItem("inputId")).next().hide().html("");}//上下键选择和鼠标选择事件改变颜色window.getFocus = function (obj) {$(".item").css("background", "");$(obj).css("background", "#e6e6e6");}//点击选中事件，获取选中内容并回显到输入框window.getCon = function (obj) {var value = $(obj).text();//如果未定义idField，则不添加idField字段var idField = sessionStorage.getItem("idField");if (idField != undefined && idField != null) {$("#" + sessionStorage.getItem("idField")).val($(".item").attr("name"))}$("#" + $(".item").parent().prev().attr("id")).val(value);$("#" + $(".item").parent().prev().attr("id")).next().hide().html("");}//自动完成渲染yutons_sug = new yutons_sug();//暴露方法exports("yutons_sug", yutons_sug);
});
代码：
<script type="text/javascript">layui.config({base: '<%=request.getContextPath()%>/portlets/common/plugins/'});layui.extend({//jzzp/yutons_sug:引用yutons_sug.js的路径yutons_sug: 'jzzp/yutons_sug'}).use(['yutons_sug'], function () {//创建yutons_sug搜索框提示插件||输入框提示插件实例var yutons_sug = layui.yutons_sug;//初始化姓名输入提示框yutons_sug.render({id: "xm", //设置容器唯一id 对应输入框的iddata:{},cols: [[{field: 'xm',//后台返回值title: '姓名',//提示框的头部width: '33%'}, {field: 'age',//后台返回值title: '年龄',//提示框的头部width: '67%'}, {field: 'number',//后台返回值title: '编码'}]], done: function () {//hidden 的值 用于传参，不用展示页面$min("[data-field='number']").css('display', 'none');},type: 'sugTable', //设置输入框提示类型：sug-下拉框，sugTable-下拉表格url: "<%=request.getContextPath()%>/xxx/xxx/xxx/xxx.do?name=",//输入input框的值parseData: function (res) { //res 即为原始返回的数据 需固定如此$('#sugItem')[0].style.marginTop = '0'//设置提示框和input框的距离return parseDataForLayTable(res);$("#sugItem").remove();},page: {limit: 10, limits: [10]}//分页});// 重写查询列表单击事件功能$min(document).on('click', '#sugItem .layui-table-body table > tbody > tr', function (res) {$min("#xm").val($min(this).find("td:first").text());$min("#number").val($min(this).find("td:last").text());$('#xm')[0].setAttribute('data-rybm',$min(this).find("td:last").text())$("#sugItem")[0].style.display = 'none';});});</script>yutons_sug搜索框提示插件||输入框提示插件相关推荐
- [Jquery插件]输入框提示textbox-hinter
在web开发中,为了提升网页输入框的用户体验,输入提示是很重要的一部分. 以下这种输入提示是我们经常用到的,如图所示: jquery插件textbox-hinter可以很方便快捷地实现这个功能. HM ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- 仿百度搜索框自动下拉提示
摘自 https://www.cnblogs.com/kingshing/p/7389299.html 转载于:https://www.cnblogs.com/JonMingrev/p/1015380 ...
- 搜索框内容自动提示bootstrap ajax
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 实现搜索框记录搜索历史_三个案例告诉你：“搜索框”该如何设计？
不管是在2C还是2B产品,"搜索"是产品中最常见且必不可少的功能模块之一.对于用户来说,在众多功能模块和信息层级中如何快速定位到目标,通过输入已知的关键词进行搜索是最便捷的方式,没 ...
- 从结构、类型和状态3个方面，帮你掌握搜索框设计
我们在工作和生活中经常会用到搜索框,比如进入一款电商平台,我们需要去搜索自己想买的东西,就可以依靠搜索框完成这一动作,所以搜索框的设计也是重中之重:本文作者分享了关于从三个方面设计搜索框,我们一起来了 ...
- idea从插件市场或者外部插件库导入插件的方式
我们平时在使用idea进行开发时,会用到一些插件来辅助开发或增强某些功能.选好合适的插件能帮助我们提高开发效率,事半功倍. 以下提供从idea内部自带的插件市场下载插件和从idea外置插件库导入插件的 ...
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
- bootstrap js插件篇——提示框、弹出框、警告框
六.提示框.弹出框.警告框 6.1提示框 6.1.1基本结构 注: 1.提示框的触发方式和前面介绍的插件略有不同,不能直接通过自定义的属性 data- 来触发,必须得依赖于JavaScript的代码触 ...
最新文章
- java鼠标样式设置,设置Echarts鼠标悬浮样式
- 数据挖掘系列（3）--关联规则评价
- officescan客户端迁移和升级
- matlab将脚本导出动态库文件.dll，并被python调用
- 28. 实现 strStr() golang
- try-with-resource语法
- 批处理启动myeclipse
- 第五章 循环结构课内反思
- 计算机基础知识的知识要点,计算机基础知识要点
- 用英伟达Jetson Nano运行PyTorch Fast.ai丨手把手教程+第三方工具
- 中随机打乱序列的函数_excel函数应用：如何快速制作考生座次分配表
- 我到底该如何待你-“百度”
- c++反汇编与逆向分析 小结
- QPainter基本绘图【1】
- 齐治运维堡垒机后台命令执行漏洞
- 三菱PLC之间通信概要
- [Android]进程通信Andromeda框架
- 创建个人网页，创建个人网址。
- matlab 雷电,利用MATLAB实现对雷电监测数据的分析和绘图
- 简易示波器c语言程序,单片机简易数字示波器仿真+源程序+电路原理图