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

java达人

发布于 2018-01-31 18:18:08

1.3K0

发布于 2018-01-31 18:18:08

文章被收录于专栏：java达人

一部分企业在招人时，可能是为了节省人力成本，会要求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，并在本号发表。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-03-27，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery