可编辑的搜索框

最新推荐文章于 2022-11-01 15:29:09 发布
最新推荐文章于 2022-11-01 15:29:09 发布
阅读量175 收藏
点赞数
分类专栏： 前端 输入框 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44806372/article/details/100167958
版权

初版，优化完我再贴新的，没有做多选框，做的单选
/* 输入框 */ css代码

.newxitongzuoye_main_li .select{
				position: relative;
				border-radius:4px;
				min-width: 320px;;
				border:1px solid rgba(0,0,0,0.15);
				background:rgba(255,255,255,1);
				box-sizing: border-box;
				display: flex;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
			}
			.my-select-input{
				max-width: 320px;
				height: 28px;	
				border: none;
				outline: none;
				border-radius:4px;
				padding: 4px;
				color: #606266;
				line-height: normal;
				white-space: normal;
				z-index: 1;
			}
			.my_option{
				position: absolute;
				background: #ffffff;
				overflow: hidden;
				min-width: 194px;
				transform-origin: center top;
				z-index: 2181;
				top: 40px;
				border: 1px solid #e4e7ed;
				border-radius: 4px;
				background-color: #fff;
				-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin: 5px ;
				display: none;
			}
			.option_main{
				position: relative;
				overflow: scroll;
			}
			.option_main >dl{
				width: 320px;
				max-height: 160px;
				margin: 0;
				overflow: scroll;
			}
			.option_main >dl dd{
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20px;
				font-size: 14px;
				color: #606266;
				box-sizing: border-box;
				cursor: pointer;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 32px;
    			line-height: 32px;
			}
			.option_main >dl dd:hover{
				background-color: #f5f7fa;
			}
			.xiaoSpan{
				display: inherit;
				box-sizing: border-box;
				border-color: transparent;
				margin: 2px 0 2px 6px;
				background-color: #f0f2f5;
			}
			.spanText{
				display: inline-block;
				height: 24px;
				padding: 0 8px;
				max-width: 80px;
				text-align: center;
				line-height: 30px;
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
				/* width: 50px;需要配合宽度来使用f */
			}
			.my-close:hover{
				background: #909399;
			}
			.my-close{
				margin: 0px 5px;
			}
			/* 选中背景色 */
			.selectBGColor{
				background: #F58823;
			}
		
			.my_option2{
				position: absolute;
				background: #ffffff;
				overflow: hidden;
				min-width: 194px;
				transform-origin: center top;
				z-index: 2181;
				top: 40px;
				border: 1px solid #e4e7ed;
				border-radius: 4px;
				background-color: #fff;
				-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin: 5px ;
				display: none;
			}
			.option_main2{
				position: relative;
				overflow: scroll;
			}
			.option_main2 >dl{
				width: 320px;
				max-height: 160px;
				margin: 0;
				overflow: scroll;
			}
			.option_main2 >dl dd{
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20px;
				font-size: 14px;
				color: #606266;
				box-sizing: border-box;
				cursor: pointer;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 32px;
    			line-height: 32px;
			}
			.option_main2 >dl dd:hover{
				background-color: #f5f7fa;
			}
		</style>/* 输入框 */
			.newxitongzuoye_main_li .select{
				position: relative;
				border-radius:4px;
				min-width: 320px;;
				border:1px solid rgba(0,0,0,0.15);
				background:rgba(255,255,255,1);
				box-sizing: border-box;
				display: flex;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
			}
			.my-select-input{
				max-width: 320px;
				height: 28px;	
				border: none;
				outline: none;
				border-radius:4px;
				padding: 4px;
				color: #606266;
				line-height: normal;
				white-space: normal;
				z-index: 1;
			}
			.my_option{
				position: absolute;
				background: #ffffff;
				overflow: hidden;
				min-width: 194px;
				transform-origin: center top;
				z-index: 2181;
				top: 40px;
				border: 1px solid #e4e7ed;
				border-radius: 4px;
				background-color: #fff;
				-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin: 5px ;
				display: none;
			}
			.option_main{
				position: relative;
				overflow: scroll;
			}
			.option_main >dl{
				width: 320px;
				max-height: 160px;
				margin: 0;
				overflow: scroll;
			}
			.option_main >dl dd{
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20px;
				font-size: 14px;
				color: #606266;
				box-sizing: border-box;
				cursor: pointer;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 32px;
    			line-height: 32px;
			}
			.option_main >dl dd:hover{
				background-color: #f5f7fa;
			}
			.xiaoSpan{
				display: inherit;
				box-sizing: border-box;
				border-color: transparent;
				margin: 2px 0 2px 6px;
				background-color: #f0f2f5;
			}
			.spanText{
				display: inline-block;
				height: 24px;
				padding: 0 8px;
				max-width: 80px;
				text-align: center;
				line-height: 30px;
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
				/* width: 50px;需要配合宽度来使用f */
			}
			.my-close:hover{
				background: #909399;
			}
			.my-close{
				margin: 0px 5px;
			}
			/* 选中背景色 */
			.selectBGColor{
				background: #F58823;
			}
		
			.my_option2{
				position: absolute;
				background: #ffffff;
				overflow: hidden;
				min-width: 194px;
				transform-origin: center top;
				z-index: 2181;
				top: 40px;
				border: 1px solid #e4e7ed;
				border-radius: 4px;
				background-color: #fff;
				-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin: 5px ;
				display: none;
			}
			.option_main2{
				position: relative;
				overflow: scroll;
			}
			.option_main2 >dl{
				width: 320px;
				max-height: 160px;
				margin: 0;
				overflow: scroll;
			}
			.option_main2 >dl dd{
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20px;
				font-size: 14px;
				color: #606266;
				box-sizing: border-box;
				cursor: pointer;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 32px;
    			line-height: 32px;
			}
			.option_main2 >dl dd:hover{
				background-color: #f5f7fa;
			}
		</style>

	///html代码

<div class="select">
						<!-- <span class="xiaoSpan">
							<span class="spanText">html</span>
							<i class="layui-icon layui-icon-close my-close"></i></span> -->
						<!-- <span class="xiaoSpan"><span class="spanText">javascript</span></span>
						<span class="xiaoSpan"><span class="spanText">css</span></span> -->
						<input type="text" autocomplete="off" class="my-select-input" placeholder="请选择主题">
						<div class="my_option">
							<div class="option_main">
								<dl class="option_list">
								<dd class="list-item">html</dd>
								<dd>javascript</dd>
								<dd>css</dd>
								</dl>
							</div>
							
						</div>
						<div class="my_option2">
								<div class="option_main2">
									<dl class="option_list2">
									<dd class="list-item2"></dd>
									</dl>
								</div>
								
							</div>
					</div>

/ js代码，用的jquery，事件比较近，没有封装，以后有时间改
// 下拉列表
//阻止默认事件，防止鼠标失焦事件宣布中的bug

$('.select').click(function (e){
		e.stopPropagation();
	})
	$('.my-select-input').focus(function(e){//鼠标获取焦点事件
		e.stopPropagation();
		$('.my_option').show();
	})
	// $('.my-select-input').blur(function(){
	//tip ：鼠标失焦事件大于其他事件执行
	$(document).click(function (){
		$('.my_option').hide();
	})
	$('.option_list').delegate('dd','click',function(e){ 点击添加节点
		e.stopPropagation()
		$('.select .xiaoSpan').remove();
		$(this).addClass('selectBGColor').siblings().removeClass('selectBGColor'); 
		var str = '<span class="xiaoSpan"><span class="spanText">'+ this.innerHTML+'</span><i class="layui-icon layui-icon-close my-close"></i></span>'
		$('.select .my-select-input').before(str)

		console.log(this.innerHTML)
		$('.my_option').hide();
	 });
	//  点击删除选中 点击删除选中事件
	$('.select').delegate('.my-close','click',function(e){ 
		e.stopPropagation()
		$('.select .xiaoSpan').remove();
	})
	//  实时监听输入框 监听下拉事件
	$(".my-select-input").bind("input propertychange",function(){
		if($(this).val() != ''){
		$('.my_option').hide();
		$('.my_option2').show();
		var str2 = $(this).val()
		$('.list-item2').text(str2)
		}else{
			$('.my_option2').hide();
			$('.my_option').show();
		}
	})
	$('.list-item2').click(function(e){ //输入标题的时候，非下拉 显示事件
		e.stopPropagation()
		$('.select .xiaoSpan').remove();
		var str = '<span class="xiaoSpan"><span class="spanText">'+ this.innerHTML+'</span><i class="layui-icon layui-icon-close my-close"></i></span>'
		$('.select .my-select-input').before(str)
		$('.my_option2').hide();
		$('.my-select-input').val('')
	})

		//回车键事件
		$('.my-select-input').keyup(function(){
			if(event.keyCode==13 && $(this).val() != ''){
				$('.select .xiaoSpan').remove();
				var str = '<span class="xiaoSpan"><span class="spanText">'+ $(this).val()+'</span><i class="layui-icon layui-icon-close my-close"></i></span>'
				$('.select .my-select-input').before(str)
				$('.my_option2').hide();
				$('.my-select-input').val('')
			}
		});
	// input 摁下事件
	// $(".my-select-input").keydown(function(){
	// 	$('.my_option').show();
	// 	$('.my_option dd').hide();
	// })
});
请叫我大神先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
选择框可输入可搜索查询下拉选项框（自定义）
张梦兰的博客
08-02 6911
//css部分 jquery.splendid.textchange.js可以自己去下载  .searchSelectDiv {  margin: 0 50px 0 0;  height: 24px;  line-height: 24px;  width: 118px; } .searchSelect {  position: relative; } .searchSel...
MFC实现CListCtrl创建，CListCtrl双击可编辑，Dialog标题栏隐藏功能
05-14
MFC实在是太古老了，连个表格双击可编辑实现代码在网上都搜索不到，没办法自己写一个，基本上已实现该功能，并实现整个Dialog标题栏隐藏功能。
editableSelect可编辑搜索的下拉框插件
09-01
editableSelect可编辑搜索的下拉框插件
可编辑的select框的实现(实用版)
weixin_34150830的博客
05-09 189
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt;  &lt;HEAD&gt;   &lt;TITLE&gt;可编辑select&lt;/TITLE&gt;   &lt;script &gt;      function selShiftDesc(desc){
搜索框制作
liuhongJAVAEn的专栏
03-21 1070
<br />有时在添加数据时，常常会遇到下拉列表特别的长，有时甚至好几百行，下拉列表就不能完全的展示了。<br />我想到的就是在边上加一个模糊搜索的功能，根据输入的数据到数据库查找，然后将获取的值赋给下拉列表，这样增加了页面的人性化选择。<br />以下就是我用JQuery实现的效果以及代码展示：<br /><em class="ml10 scpy hand SearchCpy" rel="weihuDiv" id="SearchCpy">点击查找用户</em><br />     <div class
html 搜索框输入提示，可输入可选择可模糊查询的select下拉，jquery实现操作（原生代码）
PrimaryColor
09-10 4475
根据网络其他大神的代码进行了一些更改，现在可以把输入框放置任何位置。 效果图： html： <span class="second"> <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" /> <sel
可编辑框搜索筛选联系人
01-16
根据搜索内容对ListView中的数据进行筛选，并对搜索内容进行拼音检索，可方便、快速的获取所需信息
可编辑的下拉框
05-07
利用样式做的文本框和下拉框的结合,点击下拉框可为文本框赋值,不带搜索功能
axure-搜索框实例
最新发布
12-13
axure简书首页搜索框实例，可直接打开，编辑和修改成自己想要的样式 axure简书首页搜索框实例，可直接打开，编辑和修改成自己想要的样式 axure简书首页搜索框实例，可直接打开，编辑和修改成自己想要的样式 axure...
CAD系统变量大全-PDF版可以搜索
02-09
BLOCKEDITLOCK：BLOCKEDITLOCK 系统变量禁止打开块编辑器和编辑动态块定义：0.指定可以打开块编辑器, 1.指定不可以打开块编辑器。 BLOCKEDITOR：BLOCKEDITOR 系统变量反映块编辑器是否已打开：0.指示块编辑器未打开...
输入框(带搜索)
weixin_46252229的博客
09-27 269
输入框(带搜索) <template> <div> <el-button type="primary" @click="dialogVisible =true">主要按钮</el-button> <add-dialog :dialogTitle="dialogTitle" :visible.sync="dialogVisible" @updateVisible="updateVisible"
el-select 可选择/可输入，自定义搜索方法
weixin_42255542的博客
11-01 4347
el-select 可选择/可输入，自定义搜索方法
前端模糊查询，可编辑，可选择的搜索框实现
11-17 1349
为了减少ajax请求，提高用户体验，对于一些信息量不大的模糊查询，可以前端实现，简单看下效果： 下面直接上代码： html代码，需要有如下的页面结构和属性 <div class="wyInput" id="myInput"> <div class="wyinput-group"> <input type="t...
input搜索框实时检索功能实现（超简单，核心原理请看思路即可）
热门推荐
qq_39974331的博客
05-22 7万+
问题：实现input搜索框实时检索的功能，类似哔哩哔哩首页搜索功能。公司要求，emmmm没办法，果然懒人是要被赶着走才会进步的说，诶嘿O(∩_∩)O。解决方法：    1.参考资料：http://www.jb51.net/article/111408.htm 基础思路                        http://blog.sina.com.cn/s/blog_69ec42d5010...
可输入的下拉列表(带搜索功能)
天翔的专栏
01-29 7458
Editable listbox/* Common elements */body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}table{font-size:inherit;font:x-small;}/* Options Templates */.ac_menu{border:1px solid #
可模糊查询输入框(仿百度搜索栏)
紫菜中毒的博客
06-22 3万+
可模糊查询输入框(仿百度搜索)，非插件、框架封装流。手写
markdown 分页 排序 搜索文章
ITDragon博客
08-19 8863
markdown 分页 排序 搜索文章 markdown 操作文章  ：http://blog.csdn.net/qq_19558705/article/details/52171181 markdown 发表文章： http://blog.csdn.net/qq_19558705/article/details/52121321 markdown 页面编辑器： ht
基于jquery的搜索框输入提示
shiyuezhong的专栏
10-11 4万+
仿百度与google的搜索框输入提示，支持键盘上下选择与鼠标点击选择。只包含前面代码，后台返回数据为模拟的数据。 1.未输入前的效果 2.输入内容后，自动弹出下拉层，里面有若干匹配输入内容的输入建议项 3.按下键盘的↑↓键可以在下面的输入提示项中进行选择，选中的项自动将文字填补到搜索输入框中（如图），也可以用鼠标点击来选中项。 4.代码  index.html
qt QLineEdit可编辑状态
04-19
好的，关于qt QLineEdit的可编辑状态，我可以为您解答。QLineEdit是Qt框架中的一个组件，通常用于输入单行文本，例如用户名、密码、搜索关键字等等。QLineEdit的可编辑状态可以通过setReadOnly(bool)函数来设置，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值