有时候我们需要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,带输入提示的更多相关文章

  1. div模仿select效果二:带搜索框

    项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...

  2. JQ模仿select

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  4. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  5. IE6下div遮盖select的最优解决方案

    a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...

  6. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

  7. hive -e执行出现「cannot recognize input near '<EOF>' in select clause」问题

    问题现象 写了一个简单的shell脚本调用hive执行组装的sql,在执行时总是报cannot recognize input near '<EOF>' in select clause错 ...

  8. input清空和重置select下拉框

    背景 一般页面搜索条件都会有input输入框和select选择框,同时页面上都会有重置reset按钮,这时就需要清空input和重置select 实现 清空input 清空单个input: $(&qu ...

  9. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

随机推荐

  1. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

  2. 如何开发一个Servlet

    1 如何开发一个Servlet 1.1 步骤: 1)编写java类,继承HttpServlet类 2)重新doGet和doPost方法 3)Servlet程序交给tomcat服务器运行!! 3.1 s ...

  3. easyui numberbox输入框 编辑不可编辑的切换

    背景:申请单里需要选费用类型,费用类型有的有子明细项,有个合计项    当有子明细项的时候,合计项的值是通过弹出的子明细项价格的总和(设置为可编辑没问题,因为点击出来弹框,编辑不了)    没有子明细 ...

  4. 06_zookeeper原生Java API使用

    [Zookeeper构造方法概述] /** * 客户端和zk服务端的连接是一个异步的过程 * 当连接成功后,客户端会收到一个watch通知 * * ZooKeeper(String connectSt ...

  5. latex 调整间隔

    转自:http://blog.sina.com.cn/s/blog_4a4927c70100phsb.html,感谢分享! 一.LATEX调整公式与正文间距离,调整空白大小:   调整空白命令: \s ...

  6. angular 动态组件类型

    出处:https://github.com/Penggggg/angular-component-practices 组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) pr ...

  7. 无需安装 vsftpd , 直接使用 FTP 来管理 docker 容器中的文件

    无图无真相,先放个效果图:     背景 使用 docker 来跑一些服务很方便,但是有的时候想管理容器里面的文件却很麻烦 -- 一般常规做法有3种: 通过数据卷或数据卷容器的方式 启动容器的时候时候 ...

  8. web images

    ps切图时,我们保存时会要求选择文件格式. 一般来说,如果图像的色彩丰富,没有透明度的要求,则选择为jpeg格式: 如果图像色彩不丰富,我们就选择为png-8的格式,注意:ps中要选择无杂边,无仿色 ...

  9. jquery事件绑定函数

    1.bind 使用语法: jQueryObject.bind( events [, data ], handler ) jQueryObject.bind( events [, data ] [, i ...

  10. M-wordL-图

    典型的需要使用图模型 将start 和 end 以及字典一同构建成图,然后探究从start到end的最短路径