Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >select选择框随输入过滤的两种不同实现(附代码)

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

作者头像
java达人
发布于 2018-01-31 10:18:08
发布于 2018-01-31 10:18:08
1.5K03
代码可运行
举报
文章被收录于专栏:java达人java达人
运行总次数:3
代码可运行

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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
代码运行次数:0
运行
AI代码解释
复制
<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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
easyui常用组件
表单 日期选择(html初始化) <input name="tadminModel.birthday" class="easyui-validatebox Wdate" style="width: 370px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',position:{right:0,top:0}})"/> 按钮(html初始化) <a type="button" href="javascript:;" class="easyui-linkbutton" i
码客说
2019/10/22
2.4K0
跨平台PHP调试器设计及使用方法——界面设计和实现
        一个优秀的交互设计往往会影响一个产品的命运。在设计这款调试器时,我一直在构思这款调试器该长什么样子。简单、好用是我设计的原则,于是在《跨平台PHP调试器设计及使用方法——立项》一文中,我给出了一个Demo。之后实现的效果也与之变化并不大。(转载请指明出于breaksoftware的csdn博客)
方亮
2019/01/16
8210
easy ui Tree请求跨域数据
jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。
寻找石头鱼
2019/09/11
7560
MVC5+EasyUI+EF6增删改查以及登录登出的演示
创建StudentController、 及Index视图, 在Index上按F5运行
明志德道
2023/10/21
3230
MVC5+EasyUI+EF6增删改查以及登录登出的演示
easyui+nodejs+sqlserver增删改查实现
用到的模块或者技术: Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com
用户1141560
2017/12/26
3.2K0
easyui+nodejs+sqlserver增删改查实现
下拉框、下拉控件之Select2。自动补全的使用
1、使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络)。
别先生
2019/06/03
2.6K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧。 后台系统没有多大的UI视觉,这次我们采用的是标准的左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭 开发工具 Visual Studio 2012(以上) 开始搭建 打开我们熟悉的VS创建一个空解决方案。我起了个名字叫Apps,类库命名空间将与Apps开头 如Apps.BLL,Apps.Web等命名 1. 新建MVC5.
用户1149182
2018/01/16
2.4K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
EasyUI初体验–右键弹框
在C/S中可能非常easy实现右键弹框,但在B/S中直到今天我才搞定,小小得瑟一下。只一个html页面,导入相关的Easy-UI类库就能搞定,Easy-UI类库下载地址
全栈程序员站长
2022/07/13
1.1K0
EasyUI初体验–右键弹框
第十八章 DjangoWeb开发框架
第十八章 DjangoWeb开发框架 第一课 内容概要: 1.JS正则 -登录注册验证 2.组件 1.BootStrap -css -js 学习BootStrap规则 2.jQueryUI -css -js 学习jQueryUI规则 3.EasyUI -css -js 学习EasyUI规则 3.Web框架 4.Django(python功能最齐全的Web框架) 第二课 JS正则 1.t
玩蛇的胖纸
2018/06/08
8680
easyui 布局_layout布局
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说easyui 布局_layout布局,希望能够帮助大家进步!!!
Java架构师必看
2022/07/25
2.3K0
easyui 布局_layout布局
用jQuery模拟select下拉框
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:)
菩提树下的杨过
2019/09/12
4K0
初试JqueryEasyUI(附Demo)[通俗易懂]
  关于easyui不多说,对于我们这样没有美术功底的程序员来说,简直是大大的福利,园里面也有不少人在用,自己在整理一个个站,后台管理要用,正好可以学习下。网上找了相关的教程什么的,但是发现还是官网上的demo讲的狠详细,还有就是下载后的demo示例,但都是某个控件示例,很遗憾,没有整个系统的demo。
全栈程序员站长
2022/09/07
2K0
初试JqueryEasyUI(附Demo)[通俗易懂]
thinkjs crud练习
该文章介绍了一种使用 ES6 实现模板引擎,并使用 ThinkJS 引擎进行模板渲染的方法。该方法包括配置 ES6 环境、定义模板引擎接口、实现模板引擎基类、定义模板语法、实现模板编译和渲染、编写测试用例和代码示例。
用户1141560
2017/12/26
1.5K0
thinkjs crud练习
Web前端学习笔记之jQuery基础
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
Jetpropelledsnake21
2019/02/15
3.7K0
jQuery EasyUI 详解
easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。
老马
2018/07/31
9.7K0
jQuery EasyUI 详解
jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了。
全栈程序员站长
2022/07/15
4K0
javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可
海仔
2019/08/26
8.4K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.7K0
前端基础:jQuery
jQuery 能做的 JavaScript 也都能做,但使用 jQuery 能大幅提高开发效率
RendaZhang
2020/09/08
13.8K0
前端基础:jQuery
day41_jQuery学习笔记_02
下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:
黑泽君
2018/10/11
4K0
相关推荐
easyui常用组件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验