select选择框随输入过滤的两种不同实现(附代码)

一部分企业在招人时,可能是为了节省人力成本,会要求java开发人员熟悉前端技术,有些只要求会使用easyui这样的框架就行,而另一些则要求java程序员精通前端技术,能够全栈式开发,当然,你也可以藉此要求更高的工资。前端技术一定是我们的一个加分项。

那么,怎样才能提高自己的前端开发水平,直至做到精通呢?比如要设计一个select组件,可以实现随输入过滤的功能,很多人都会想到用一些现成的js框架,比如easyui,下面是基于框架的实现方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

 <style>
  body {
   text-align: center;
   margin: 100px auto;
  }

  .demo-info {
   margin: 20px auto;
  }
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <meta name="description" content="demo!">
 <title>Filter ComboBox </title>
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h4>js小点心,慢用</h4>

<div class="demo-info">
 <input id="cg" style="width:150px"></input>
</div>


<script type="text/javascript">
 $(function () {
  $('#cg').combobox({
   valueField: 'id',
   textField: 'text',
   fitColumns: true,
   data: [{
    "id": 1,
    "text": "阿门"
   }, {
    "id": 2,
    "text": "逼格"
   }, {
    "id": 3,
    "text": "大神",
    "selected": true
   }, {
    "id": 4,
    "text": "低调"
   }, {
    "id": 5,
    "text": "a易容"
   }, {
    "id": 6,
    "text": "福气来"
   }, {
    "id": 7,
    "text": "鸟人鸟语"
   }
   ],
   filter: function (q, row) {
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) != -1;

   }
  });

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

展现效果:

代码简短易懂,浏览器中的展现效果也不错,但是频繁使用框架,并不能从根本上提高你的编程能力,你需要熟悉内部原理,要习惯性地思考:如果不用框架,我自己来实现这个功能,该怎么写?下面是不用框架的实现代码。

<html>
<head>
 <title>js小点心</title>
</head>
<style>

 .container {
  position: relative;
  top: 250px;
  left: 600px;
 }

 .shuru {
  width: 100px;
  position: absolute;
  left: 0px;
 }

 .selectCon {
  margin-left: 100px;
  width: 18px;
  overflow: hidden;
 }

 .selElem {
  width: 118px;
  margin-left: -100px
 }


</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
 var arr = ["阿门", "逼格", "大神", "低调", "a易容",
  "福气来", "鸟人鸟语", "鸟语", "鸟类", "鸟物"];
 $(function () {

  $(".selElem").on('change', function () {
   $(".shuru").val($(this).val());
   $(this).attr('size', 0);

  });


  $(".shuru").on('click',
    function (event) {
     $(".shuru").val("");
     $(".selElem").html("");
     var optionSum = 0;
     for (var i = 0; i < arr.length; i++) {
      if (arr[i].indexOf($(".shuru").val()) != -1) {
       $(".selElem").append("<option value=" + arr[i] + ">" + arr[i] + "</option>");
       optionSum++
      }
     }
     $(".selElem").attr('size', optionSum);
     event.stopPropagation();
    }
  )
  $(".selElem").on('click',
    function (event) {
     $(".selElem").html("");
     var optionSum = 0;
     for (var i = 0; i < arr.length; i++) {
      if (arr[i].indexOf($(".shuru").val()) != -1) {
       $(".selElem").append("<option value=" + arr[i] + ">" + arr[i] + "</option>");
       optionSum++
      }
     }
     $(".selElem").attr('size', optionSum);
     event.stopPropagation();
    }
  )


  $(".shuru").on('input', function (e) {
   $(".selElem").html("");
   var optionSum = 1;
   $(".selElem").append("<option value=" + "</option>");
   for (var i = 0; i < arr.length; i++) {
    if (arr[i].indexOf($(".shuru").val()) != -1) {
     $(".selElem").append("<option value=" + arr[i] + ">" + arr[i] + "</option>");
     optionSum++
    }
   }
   $(".selElem").attr('size', optionSum);
  });

  $("body").on('click', function () {
   $(".selElem").attr('size', 0);
  });


 })


</script>
<body>
<div class="container">
<span class="selectCon">
<select class="selElem">

</select>
        </span>
 <input class="shuru">
</div>
</body>
</html>

展现效果:

代码比原来复杂一些,效果,尤其是展现效果也大不如前者,但是亲自写过后你会发现自己有了很大的提高。

不单单是前端,在写后端时你也要秉承这样的一种学习思路,在工作中,出于规范和开发效率的考虑,我们会使用spring框架,但spring框架使用简单,人人都会,你何从体现自己的独特价值呢,你必须比别人更深入一层,在业余时间多思考,如果让我从零开始,我会如何设计这个框架,可能一开始设计地会比较挫,没关系,任何艺术品都是日复一日精雕细琢的产物。

对前端感兴趣的同学可以改下后面那段代码,样式实在是太丑了,和你的大名一并发我邮箱xiaominger65@qq.com,并在本号发表。

原文发布于微信公众号 - java达人(drjava)

原文发表时间:2016-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏即时通讯技术

微信朋友圈千亿访问量背后的技术挑战和实践总结

微信朋友圈包括图片和视频两套业务架构组成,朋友圈图片的特点是请求量大、消耗计算资源较多,视频则主要消耗带宽。

26340
来自专栏QQ音乐前端团队专栏

直播全流程探索

有幸参与了直播从无到有的过程,对直播这一块有了一个比较清晰的认识,本文主要对web部分的直播流程进行介绍。

1.3K80
来自专栏数据小魔方

数据地图系列14|tableau数据地图

今天跟大家分享数据地图系列的第14篇(最后一篇)——tableau数据地图。 前一篇曾提到说,tableau是全球知名的数据可视化领域独占鳌头的可视化产品,在各...

63050
来自专栏Coding迪斯尼

java开发系统内核:放大招!为系统开发星球大战游戏程序

23550
来自专栏Java架构师历程

前端页面布局控件

是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。https://weui.io/

72630
来自专栏互联网杂技

花了7天看了上千个交互动效神作,我总结出5个技巧

对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个...

37860
来自专栏web前端教室

【图片简历】Vue.js在线简历编辑器;生成图片简历(二)

今天是春节之后上班第一天,许多同学们都会觉得有些不习惯吧?没关系,明天就是第二天,后天就是第三天了,慢慢的你就习惯了...跟大家开个玩笑哈,春节已过,让我们继续...

57250
来自专栏互联网杂技

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢...

34170
来自专栏华章科技

做研究必读:一分钟教你用Excel从统计局抓数据!

首先声明,我并没有学过HTML的语言,也没学过VBA,所以自己解释的逻辑应该是非常容易理解的,保证没有任何编程基础的都能学会。当然前提是你有Excel,没有的话...

12430
来自专栏守候书阁

2018前端值得关注的技术

2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测...

659150

扫码关注云+社区

领取腾讯云代金券