精华内容
下载资源
问答
  • element 实现可输入下拉框
    2020-12-11 13:20:41
    <el-select v-model="form.groupName" clearable placeholder="请选择" filterable allow-create default-first-option>
      <el-option
        v-for="item in boxTypeList"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    
    更多相关内容
  • jquery实现百度搜索关键字输入下拉框提示,非常有效果,本人亲测超级好用
  • NULL 博文链接:https://362217990.iteye.com/blog/846431
  • 简单javavscript实现的可输入下拉框(仿VC的comobox),用于html网页开发。 不懂代码的,可直接在页面中插入该源码实现,方便易用。
  • rule: { required: true, message: "请输入登录地址", trigger: "blur" }, props: { maxlength: 255, placeholder: "请输入登录地址", filterable: true, //和'allow-create': true;同时存在 'allow-create': ...

    请添加图片描述

    {
      title: "登录地址:",
      type: "select",
      key: "login_url",
      rule: { required: true, message: "请输入登录地址", trigger: "blur" },
      props: {
        maxlength: 255,
        placeholder: "请输入登录地址",
        filterable: true, //和'allow-create': true;同时存在
        "allow-create": true // '' 和 "" 不能混用
      },
      options: [
    	  {
    	    value:'https://hhy.xatasoft.com/serv/user/Login/in',text:'https://hhy.xatasoft.com/serv/user/Login/in'
    	    }
        ],
    },
    
    展开全文
  • asp.net可输入下拉框

    2012-08-06 09:05:41
    将CheckBox Text两个空间结合,简易的制作可输入下拉框
  • LayUI可选择可输入下拉框

    千次阅读 2021-01-14 16:12:51
    LayUI可选择可输入下拉框 可输入的下拉框 把input 叠加到select上,外观看起来像一个框。 利用z-index把 input框放到select 上层、并让select 不自动填充。  我现在做的事情:在选择其他时,让他自定义输入。 第一...

    LayUI可选择可输入下拉框

    可输入的下拉框

    把input 叠加到select上,外观看起来像一个框。

    利用z-index把 input框放到select 上层、并让select 不自动填充。
      我现在做的事情:在选择其他时,让他自定义输入。

    第一步

    select 加上 autocomplete=“off”

    第二步

    写一个样式:

    .input-select{position:absolute;z-index:2; width: 160px;top: 0px;display: none;}
    

    放到要用的input 或div上 (输入框先不要验证等显示的时候加验证)

    当然你可以把输入框的位置放到你想要的地方不用覆盖到select上方 用.show 和.hide控制显示和隐藏。   
    第三步:

    js 做个触发:js 因人而异吧 看想做成什么样的

    form.on('select(molding)', function(data){
                if(data.value=='其他'){
                    $('#moldingOtDiv').show();
                    $('#moldingOt').attr("lay-verify","required|length");
                }else{
                    $('#moldingOtDiv').hide();
                    $('#moldingOt').val('');
                    $('#moldingOt').attr("lay-verify","");
                }
            });
    

    那么前台大概是:
    刚进来是一个普通下拉选。当点击其他就变成了输入框。

    普通下拉框
      当点击其他:下拉框可输入

    展开全文
  • vue下拉输入框、element ul输入下拉框

    千次阅读 2022-04-11 18:36:16
    vue下拉输入框、element ul输入下拉框

    vue下拉输入框、element ul下拉选择框

    1. 结果如下 可以模糊匹配下拉项的值还可以输入其他值
      (官网上的输入框还得点击下面的框比较麻烦)
      在这里插入图片描述
    2. 代码如下
    <template>
    	<el-form ref="form" :model="form" label-width="80px">
    		<el-form-item label="名称">
    			<!-- 下拉框 -->
    			<el-select v-model="form.value" style="width: 312px;" ref="valSelect" filterable @blur="valSelectBlur" @focus="valSelectFocus"
    			 @change="valSelectChange">
    				<el-option v-for="item in options" :key="item" :label="item" :value="item">
    				</el-option>
    			</el-select>
    			<!-- 输入框 使用position: absolute;left: 0px;将输入框定位到下拉框上方 -->
    			<el-input v-model="form.name" style="width: 280px;position: absolute;left: 0px;" @blur="valInputBlur" ref="valInput"
    			 @focus="valInputFocus"></el-input>
    		</el-form-item>
    	</el-form>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				// 表单值
    				form: {
    					name: "",
    					value: ''
    				},
    				// 下拉框显示的内容
    				options: [],
    				// 下拉框全部内容(内容从后台获取)
    				optionsAll: ['黄金糕', '双皮奶', '蚵仔煎', '龙须面', '北京烤鸭', '黄金面', '奶煎鸭'],
    				// 焦点信息
    				// 输入框是否第一次获取焦点
    				inputOneFocus: true,
    				// 焦点是否在下拉框
    				valSelectFocusVal: false,
    				// 焦点是否在输入框
    				valInputFocusVal: false,
    			}
    		},
    		watch: {
    			"form.name": function(val) {
    				var data = [];
    				// 从全部中筛选和输入框匹配的下拉框
    				for (var i = 0; i < this.optionsAll.length; i++) {
    					if (this.optionsAll[i].indexOf(val) >= 0 || val == 0) {
    						data.push(this.optionsAll[i]);
    					}
    				}
    				//将匹配的下拉项给下拉框
    				this.options = data;
    				//焦点给下拉框
    				this.$refs.valSelect.focus();
    			}
    		},
    		methods: {
    			//下拉框获取焦点后将焦点给输入框
    			valSelectFocus() {
    				this.valSelectFocusVal = true;
    				//焦点给输入框
    				this.$refs.valInput.focus();
    			},
    			//下拉框失去焦点
    			valSelectBlur() {
    				this.valSelectFocusVal = false;
    			},
    			//点击下拉框里面的下拉项时 将点击的值赋给输入框 --还可以进行其他操作
    			valSelectChange(val) {
    				this.valSelectFocusVal = false;
    				this.form.name = val;
    				//---其他操作---可以去后台查询相关数据
    			},
    			//输入框失去焦点后
    			valInputBlur() {
    				let that = this;
    				that.valInputFocusVal = false;
    				if (that.optionsAll.indexOf(that.form.name) >= 0) {
    					setTimeout(() => {
    						//100毫秒后 焦点不在输入框也不在下拉框时的操作
    						if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {
    							//---其他操作---可以去后台查询相关数据
    							console.log("输入值在下拉项中存在");
    							that.inputOneFocus = true;
    						}
    					}, 100)
    				}else{
    					setTimeout(() => {
    						//500毫秒后 焦点不在输入框也不在下拉框时的操作
    						if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {
    							//---其他操作---可以去后台查询相关数据
    							console.log("zzz");
    							that.inputOneFocus = true;
    						}
    					}, 500)
    				}
    			},
    			// 输入框获取焦点
    			valInputFocus() {
    				this.valInputFocusVal = true;
    				this.form.value = this.form.name;
    				//是否第一次获取焦点
    				if(this.inputOneFocus){
    					this.inputOneFocus = false;
    					var data = [];
    					// 从全部中筛选和输入框匹配的下拉框
    					for (var i = 0; i < this.optionsAll.length; i++) {
    						if (this.optionsAll[i].indexOf(this.form.name) >= 0 || this.form.name == 0) {
    							data.push(this.optionsAll[i]);
    						}
    					}
    					//将匹配的下拉项给下拉框
    					this.options = data;
    					//200毫秒后打开下拉框
    					setTimeout(() => {
    						//焦点给下拉框
    						this.$refs.valSelect.focus();
    					}, 200)
    				}
    			}
    		}
    	}
    </script>
    
    
    展开全文
  • 选择:<input list="select_code" placeholder="输入&下拉" value="" class="select"/> <datalist id="select_code" class="select_code"> <option value="111"/> <opti...
  • 输入下拉框

    2018-07-23 17:44:59
    jquery+bootstrap提供可输入下拉框,自己系统中用的感觉还可以
  • 输入下拉框

    千次阅读 2019-03-14 17:45:54
    原理:在下拉框前面加多一个input输入框,把下拉框的值赋给input 需要给input加入样式,让input跟下拉框对齐 HTML代码: &lt;select id="vehicleAgent"&gt; &lt;option value=""...
  • input输入下拉框

    2018-07-11 19:41:00
    jquery的input输入框,可填写也可以下拉。比较简单方便
  • 本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1、原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 ...
  • 制作一个输入框和下拉框: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
  • android 手动实现可输入下拉框Spinner控件(工具类)

    千次阅读 多人点赞 2019-05-21 22:56:58
    一、前言 一丝感想 一直想着多写几篇博客,一个为了提升自己,也是给需要的人提供帮助。可惜,项目太近,琐事太多,实在闲不下来,唉。...所以要实现一个手动输入下拉框,我们需要自己手动实现...
  • input模拟输入下拉框

    千次阅读 2019-02-28 08:43:00
     输入、下拉选择、根据输入内容模糊检索、键盘上下键选择  实现思路:  显示隐藏:  input获取焦点显示,失去焦点隐藏  下拉选择:  以父元素为基准,通过绝对定位定位至input输入下方  模糊检索:  ...
  • 输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框输入下拉框
  • Vue历险记之可输入下拉框的实现

    千次阅读 2018-06-13 09:23:52
    最近在做项目时,遇到了一个奇怪的需求,简单来说就是在下拉框选择后,可以对选中项的文本进行修改,选项文本和用户的输入之间属于双向绑定的关系。以前没有遇到过这种需求....在尝试了几种方法后,总算把这个问题...
  • html实现可输入下拉框

    万次阅读 2016-08-23 14:18:03
    输入下拉框            请选择 csdn 123  ">write.blog.csdn.net/postedit
  • HTML/jQuery/js实现可编辑可输入下拉框

    千次阅读 2018-08-16 19:56:37
    方案思路:输入框和下拉小三角紧密拼合,使样式上看起来像一个单纯的下拉框 ① 优点:思路清晰,实现简单 ② 缺点:样式很难做兼容 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
  • https://blog.csdn.net/ad13adsa/article/details/82108969 private void dataGridViewX1_EditingControlShowing(object sender, DataGridViewEditingControlShowingEventArgs e) { e.Control...
  • input覆盖select实现可输入下拉框

    千次阅读 2017-08-10 14:46:21
    String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";...js实现可输入下拉框 div{ display:inline; }
  • Unity中UGUI制作可输入下拉框

    千次阅读 2022-03-25 16:54:44
    Unity中UGUI制作可输入下拉框 文章目录Unity中UGUI制作可输入下拉框前言组件分析制作流程总结 前言 在搜索引擎以及一些网页中我们常常可以看见这样一种UI控件,看上去是一个输入框,在输入之后会弹出一个列表(或者...
  • 下拉框的文本输入框类(文本下拉输入框),输入文字可以搜索内容 """ def __init__ ( self , parent , size = ( 50 , 50 , 100 , 20 ) , name = 'edit' , drag = False , text_list = True , ...
  • <input id="demo1" type="text" value="{$goodsInfo.zc_category}" name="zc_category" list="zc_category" style="width: 336..." placeholder="请输入产品类别关键字"> <datalist id="zc_category"> ..
  • comBox可输入下拉框

    2010-10-27 09:44:01
    输入下拉框,在IE 中没问题,在chrom中有点小问题。
  • jsp页面可输入下拉框实现

    千次阅读 2016-04-06 22:53:06
    输入下拉框            内容01  内容02  内容03
  • php可输入下拉框控件

    2011-08-29 19:24:49
    下拉框输入文字、可下拉选择选项、外观与下拉框一致
  • 这是一个可以输入下拉框组件,同时支持按首字检索功能

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,320
精华内容 26,528
关键字:

输入下拉框