前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >select选择框随输入过滤的两种不同实现(附代码)

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

作者头像
java达人
发布2018-01-31 18:18:08
1.3K0
发布2018-01-31 18:18:08
举报
文章被收录于专栏:java达人

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

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

代码语言:javascript
复制
<!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>

展现效果:

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

代码语言:javascript
复制
<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,并在本号发表。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-03-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 java达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档