input和div模仿select,带输入提示
有时候我们需要select和input的结合体,即可以使用下拉框,同时也可以用来输入,输入的同时显示可选的下拉选项
先上html代码
<div class="input-group input-group-sm has-warning">
<span class="input-group-addon">label内容</span>
<input class='form-control' onclick="showList(this)" onkeyup="showList(this)">
</div>
对于这么个input,我们需要在点击的时候,和输入内容的时候,展示一个div,该div应该悬浮在该input下边,同时里面加上一些要选择的内容
/**
* 点击input产生下拉选项的函数
* list的内容为数组类型数据,每个元素为json,包括一个id和一个value
*/
function showList(me) {
$('.select-drop-div').remove(); //删除已有的下拉框 var list = window.list;
var me = $(me); //当前的input
var val = $(me).val(); //当前的input的val
//下拉框内部的选项
var listIn = '';
for (var i = 0; i < list.length; i++) {
if (val == '') { //输入框没有内容,显示所有选项
listIn = listIn + "<div class='select-drop-in' id=" + list[i].id + " onclick='selectDropClick(this)'>" + list[i].value + "</div>";
} else { //输入框有内容
if (list[i].value.indexOf(val) > -1) { //输入框的内容是值的一部分
listIn = listIn + "<div onclick='setValueToMySelect(this)' class='select-drop-in' id=" + list[i].id + " onclick='selectDropClick(this)'>" + list[i].value + "</div>";
}
}
//下拉框的div
var listDiv = $('<div>').css('padding', '3px').css('z-index', '200').css('height', 'auto').css('width', width).css('max-height', '200px').css('overflow', 'auto').css('position', 'absolute').css('top', '35px')
if (listIn == '') {//当输入内容没有匹配的选项时,listIn的div提示
listIn = '<div>未查找到符合的内容<br>该输入内容将被创建!</div>'
}
listDiv.addClass('select-drop-div form-control').html(listIn);
me.parent().append(listDiv);
}
对于展开的下拉选项,需要进行选择,点选的时候,应该将内容放到input中,同时对其id进行设置
/**
* 点击下拉选项的函数
*/
function selectDropClick(me) {
var me = $(me);//当前点击对象
var id = me.attr('id');//当前点击对象的id
var val = me.html();//当前点击的值
me.parent().parent().find('.form-control').val(val).attr('id', id);//赋值并写入id
$('.select-drop-div').remove(); //删除已有的下拉框
}
对于手动对input的值进行修改,其id是否正确等校验因素,不在此写了,具体问题具体分析了就
上个效果图,实际做的时候远比上述的复杂的多(校验,id不匹配的重置,表单收集,活动条目创建等)
以上!
input和div模仿select,带输入提示的更多相关文章
- div模仿select效果二:带搜索框
项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...
- JQ模仿select
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
- IE6下div遮盖select的最优解决方案
a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...
- 【IE6的疯狂之五】div遮盖select的解决方案
IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...
- hive -e执行出现「cannot recognize input near '<EOF>' in select clause」问题
问题现象 写了一个简单的shell脚本调用hive执行组装的sql,在执行时总是报cannot recognize input near '<EOF>' in select clause错 ...
- input清空和重置select下拉框
背景 一般页面搜索条件都会有input输入框和select选择框,同时页面上都会有重置reset按钮,这时就需要清空input和重置select 实现 清空input 清空单个input: $(&qu ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
随机推荐
- wampserver 点击跳转localhost变0.0.0.0的解决方法!
最近下载新版本wampserver发现点击项目不会自动添加localhost了,导致访问项目很麻烦. 修改如下 修改wamp根目录下的wampmanager.conf urlAddLocalhost ...
- 三重for循环实现对二维数组的按列排序(JavaScript)
由C语言联想到的:三重for循环实现对二维数组的按列排序,并且牵扯到数据结构. 自己写的,水平有限,本文属于原创,可能存在错误,忘指正~ function circle() { var a = [ [ ...
- push本地代码到github发生错误的解决办法
有一天,我在github上编写好了README.md这个文件,接着发现本地有段代码忘记上传了,于是熟练的输入git add . git commit -m "modify",以 ...
- 目前比较全的CSS重设(reset)方法总结(转)
原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...
- qt MessageBOX 消息
void MessageBox::slotQuestion() { switch(QMessageBox::question(this,"Question",tr("It ...
- ArrayList 与 List 关系与代码示例 - Java
关系 List 是 Java Interface, ArrayList 是 Java Class,它们都属于 java.util 包. Java List 是有序的集合(ordered collect ...
- 关于IE8下media query兼容的解决方案探讨
在国内IE8至少还占有20%的市场份额,所以在做网站时,必须得为这部分用户特殊兼容考虑. 一方面IE8上面很多css3定义的标签不能使用,另外一方面javascript的addEventListene ...
- angularJS directive中的controller和link function辨析
在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到v ...
- cookie的初识和运用(js和jq)
cookie是什么 cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身 ...
- webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...