仿下拉框,可选择,可输入,可匹配

原创 2015年11月19日 15:13:44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<style type="text/css">
    #page{width: 500px; margin: 0 auto; text-align: left;}
    #test{width: 212px; padding: 2px; height: 22px; border: 1px solid #ddd; margin: 0 5px 0 0;}
    #test option{padding: 2px 5px;}
    #test option:first-child{display: none;}
    #pre{position:relative; float: right;}
    #itest{width: 190px; padding: 2px 15px 2px 5px; margin-bottom: -1px; background: url(http://bbs.blueidea.com/data/attachment/album/201410/28/114755leueqeys1ps8dtzy.jpg.thumb.jpg) no-repeat scroll right center; border: 1px solid #ccc; box-shadow: 0 1px 0 0 #eee inset; cursor: default;}
    /*#itest:focus{cursor: text;}*/
    #dtest{width: 210px; border: 1px solid #ddd; border-radius: 0 0 3px 3px; display: none;}
    .soption{display: block; padding: 2px 5px;}
    .soption:hover{background: #f9f9f9; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; padding: 1px 5px;}
</style>


<div id="page">
    <select id="test" name="test" style="display:none">
<option value="0">--请选择--</option>
        <option value="1">1</option>
        <option value="2">12</option>
        <option value="3">13</option>
        <option value="4">14</option>
        <option value="5">16</option>
        <option value="6">17</option>
        <option value="10">101</option>
        <option value="20">102</option>
        <option value="30">103</option>
        <option value="40">104</option>
        <option value="50">105</option>
        <option value="60">106</option>
        <option value="60">106</option>
        <option value="60">106</option>
    </select>
</div>

<script type="text/javascript">
(function($){
    var input = '<div id="pre"><input id="itest" type="text" placeholder="--请选择--">';
    var strDiv = '<div id="dtest">';
    var strSpan = '';
    var L = $('#test option').size();

    for(var i = 1; i < L; i ++){
        strSpan += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
    }
    strDiv += strSpan + '</div></div>';
    $('#test').after(input + strDiv);
    //初始化结束
    //
    //
    $(document).on('focus','#itest',function(){//获得焦点,模仿select,显示模拟下拉框
        var st = $(this).val().trim();
        if(st == ''){
            $('#dtest').html(strSpan);
        }
        else{
            var strDiv2 = '';
            for(var i = 0; i < L; i ++){
                var html = $('#test option').eq(i).html();
                if(html.match(st)){
                    strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
                }
            }
            $('#dtest').html(strDiv2);
        }
        $('#dtest').slideDown(100);  //以滑动方式显示隐藏
    });

    $(document).on('blur','#itest',function(){//失去焦点,隐藏模拟下拉框
        $('#dtest').slideUp(250); //以滑动方式显示隐藏的
    });

    $(document).on('keyup','#itest',function(){//输入信息,自动匹配,暂时不支持鼠标右键
        var st = $(this).val().trim();
        if(st == ''){
            $('#dtest').html(strSpan);
            return false;
        }
        var strDiv2 = '';
        for(var i = 0; i < L; i ++){
            var html = $('#test option').eq(i).html();
            if(html.match(st)){
                strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
            }
        }
        $('#dtest').html(strDiv2);
    });

    $(document).on('mousedown','.soption',function(){//选择下拉选项
        var html = $(this).html();
        var val = $(this).data('val');
        $('#itest').val(html).data('val',val).blur();
        $('#test').val(val);
    });

})(jQuery);
</script>
</body>
</html>

相关文章推荐

考试系统——可输入并自动匹配的下拉框(一)——实现可输入并自动匹配

自动匹配,像我们平时用的百度,谷歌,如果输入某个字下面会自动匹配出很多内容来,让我们用起来很方便。             我们平时做项目,下拉框用DropDownList很方便,绑定数据库即可把数据...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js:可输入可选择的select下拉框,可及时匹配包含输入的内容(兼容ie)

js:可输入可选择的select下拉框,可及时匹配内容(兼容ie)

可以输入带自动匹配的下拉框

  • 2013年04月26日 14:43
  • 636KB
  • 下载

仿QQ微信发表说说点击编辑框输入法上边出现表情按钮,点击可选择表情

先传简单代码,之后再详细编辑说明
  • zyzhehe
  • zyzhehe
  • 2015年05月29日 15:36
  • 1332

下拉框(可输入+自动匹配)

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: 优点:节约js代码; 缺点:IE 9及以下的IE浏览...

C#(asp.net)仿baidu或google智能匹配搜索下拉框

页面文件代码: //文本输入框 //选择后的数字值 //下拉框的点击  
  • zlggyn
  • zlggyn
  • 2014年07月28日 08:29
  • 738

JQuery EasyUI+Struts2自动匹配输入下拉框(combobox)

jquery ui的combobox控件是一个即可根据输入自动显示匹配的选项,又可下拉显示所有选项的下拉框(支持中文): web页面: easyui test...

考试系统——可输入并自动匹配的下拉框(三)——Html,Web控件级联

本篇博客主要解决JQUery Easy UI框架combobox和dropdownlist的级联传值问题。上篇博客说了easy ui的框架必须按照其自己的实现方案去实现,只要有一点和easy ui的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿下拉框,可选择,可输入,可匹配
举报原因:
原因补充:

(最多只允许输入30个字)