有时候我们需要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. wampserver 点击跳转localhost变0.0.0.0的解决方法!

    最近下载新版本wampserver发现点击项目不会自动添加localhost了,导致访问项目很麻烦. 修改如下 修改wamp根目录下的wampmanager.conf urlAddLocalhost ...

  2. 三重for循环实现对二维数组的按列排序(JavaScript)

    由C语言联想到的:三重for循环实现对二维数组的按列排序,并且牵扯到数据结构. 自己写的,水平有限,本文属于原创,可能存在错误,忘指正~ function circle() { var a = [ [ ...

  3. push本地代码到github发生错误的解决办法

    有一天,我在github上编写好了README.md这个文件,接着发现本地有段代码忘记上传了,于是熟练的输入git add .   git commit -m "modify",以 ...

  4. 目前比较全的CSS重设(reset)方法总结(转)

    原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...

  5. qt MessageBOX 消息

    void MessageBox::slotQuestion() { switch(QMessageBox::question(this,"Question",tr("It ...

  6. ArrayList 与 List 关系与代码示例 - Java

    关系 List 是 Java Interface, ArrayList 是 Java Class,它们都属于 java.util 包. Java List 是有序的集合(ordered collect ...

  7. 关于IE8下media query兼容的解决方案探讨

    在国内IE8至少还占有20%的市场份额,所以在做网站时,必须得为这部分用户特殊兼容考虑. 一方面IE8上面很多css3定义的标签不能使用,另外一方面javascript的addEventListene ...

  8. angularJS directive中的controller和link function辨析

    在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到v ...

  9. cookie的初识和运用(js和jq)

    cookie是什么 cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身 ...

  10. webpack从零开始第1课:安装webpack和webpack-dev-server

    原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...