jQuery插件实现可输入和自动匹配的下拉框

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法:

1.直接使用h5的新标签<datalist>,对应demo如下:

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

优点:节约js代码;

缺点:IE 9及以下的IE浏览器 和 Safari 均不支持 <datalist> 标签(好像还有几个浏览器也不支持);重复点击输入框或者下拉图标并不能收回下拉列表;样式难以控制

2.使用基于jQuery的select2插件(需要同时引入select2.css和select2.js),html部分代码如下:

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

js部分代码如下:

$('.select2_test').select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});

注意:与bootstrap的Modal模态框结合使用时,会出现下拉列表出现在遮罩层的底层和点击弹出框关闭按钮但下拉列表并没有消失的问题,找了半天原来问题出在select2.css这个样式表中,

原因:点击输入框,此插件会生成一个遮罩层(类名为.select2-drop-mask)和一个下拉列表(类名为.select2-drop),这两者的层叠性(z-index)依次为9991,9992,但是modal弹出框的层叠性大于10000,所以才会导致出现上述两个问题

解决办法:如果将.select2-drop-mask和.select2-drop的z-index分别提高到19991、19992,下拉列表成功显示在上面,但在打开了下拉列表的前提下点击modal弹出框的关闭按钮会先收回下拉框,再次点击才能关闭弹出窗,用户体验不是很好;这里可以尝试提高关闭按钮的z-index,前提一定要父元素不能是modal弹出框,否则其提高的z-index无效。

如果想更深入了解select2.js插件,可以参考http://www.jb51.net/article/95561.htm

3.造成select2.js上述不适的主要原因在于.select2-drop的失去焦点是要点到select2-drop-mask上才能触发,为改善这种机制,这里推荐另一款基于jQuery的下拉搜索框插件magicsuggest(需要同时引入magicsuggest.css和magicsuggest.js),html部分很简单,直接就是:

<div id="magicsuggest"></div>

js部分代码如下:

$('#magicsuggest').magicSuggest({
  placeholder:'',
  allowFreeEntries: false,
  maxSelection:1,
  autoSelect:true,
  valueField:"id",
  displayField:"value",
  resultAsString:true,
  selectionStacked: true,
  highlight:false,
  data: ['Paris', 'New York', 'Gotham']
});

优点:不会出现层叠性冲突的问题;样式美观;允许多项选择

缺点:多余的样式较多(阴影、高亮、错误提示、多选),需要根据具体需要调整样式;不能直接通过$(this).val()来获取原输入框的值;数据量过大时加载会出现延迟

4.鉴于上面那个插件默认的是多选的样式,用到项目里也不能直接获取<select>标签里的值,这里我个人推荐chosen这款插件(需要同时引入chosen.css和chosen.js),html部分代码如下:

<select data-placeholder="Type 'C' to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select> 

js部分代码如下:

var config = {
  '.chosen-select':{},
  '.chosen-select-deselect':{allow_single_deselect:true},
  '.chosen-select-no-single':{disable_search_threshold:10},
  '.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
  '.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}

注意:如果与bootstrap的Modal模态框结合使用时,会出现下拉列表显示不出来, 同时.modal-body右侧出现滚动条,原因就在于bootstrap给.modal-body设置了一个overflow-y:auto的默认样式,所以解决办法就是给.modal-body添加一个overflow-y:visible的样式来覆盖它。

5.当然,实现相同功能的jQuery插件还有很多,具体可以参考http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于jquery实现的可编辑下拉框实现代码

    原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • JQuery实现级联下拉框效果实例讲解

    用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下 效果图: 逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap">         <div class="nice-select" name="nice-select&

  • jquery获取下拉框中的循环值

    话不多说,请看代码: <select class="test" id="projectno" name="projectno"> <option value="">&nbsp请输入您的所在小区</option> <volist name="cell" id="vo"> <option value="{$vo['id'

  • jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

  • js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

  • jQuery实现下拉框选择图片功能实例

    本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery

随机推荐