文档章节

dart系列(五) 可筛选的“下拉列表框”

 小小程序员1644
发布于 2015/12/02 23:19
字数 176
阅读 22
收藏 0

图:


index.html

<!DOCTYPE html>
 

<html>
<head>
    <meta charset="utf-8">
    
    <title>combox筛选框</title>
    <link rel="stylesheet" href="styles.css">
    <script async src="main.dart" type="application/dart"></script>
  <!--  <script async src="packages/browser/dart.js"></script> -->

</head>

<style  type="text/css">
 .ulcss li{
  list-style-type:none;
 }
 
 
</style>

  <input type="text" id="inpt" /> <div id="ddd"></div>
  <ul id="ultest" class="ulcss"   >
    <li>中文</li>
    <li>文</li>
    <li>2015-01-01</li>
    <li>2225-01-01</li>
    <li>~!@#%^&*()</li>
    <li>!ABCDE</li> 
    <li>!abcde</li> 
  </ul>

</body>
</html>


main.dart

import 'dart:html';

void main() {
   var myInput = querySelector('#inpt');   
   
   
   void checkInput( Event e)
   {
     var ultest = querySelector('#ultest');

     var inputStr = ( myInput as InputElement).value.toLowerCase();
     
     for( var i=0; i< ultest.children.length; i++)
     {
        var ulStr  = ultest.children[i].text.toLowerCase();
        
        if( ulStr.contains( inputStr ) )            //检查每个li是不是包含输入框输入的value
        {
          ultest.children[i].style.cssText = "";
          ultest.children[i].style.cssText = "display: visible; ";
        }else{
          ultest.children[i].style.cssText = "";
          ultest.children[i].style.cssText = "display: none;";
        }
     }
   }
   myInput.onInput.listen(checkInput);
}



© 著作权归作者所有

共有 人打赏支持
粉丝 3
博文 17
码字总数 2287
作品 0
广州
学习Rost-CM内容挖掘系统的分词工具

GooSeeker开发团队成发的在线的分词工具软件,要做到“文科生能用的分词软件”,比如,公共管理专业、社会学各专业、工商行政管理各专业、营销管理各专业等等。“文科生”没有任何褒贬含义,...

华天清
05/25
0
0
Windows Server 2008 IP策略关闭135端口

现在简要介绍一下关闭Windows Server2008一些端口的步骤: 1.点击 控制面板-管理工具",双击打开"本地策略",选中"IP安全策略,在本地计算机“右边的空白位置右击鼠标,弹出快捷菜单,选择"...

lgl梁
2014/12/09
0
0
Excel动态图表方法大集合,总有一款适合你!

图文 | 朱莉 来源 | 精进Excel 在这个万物都要看颜值的年代,做个数据报表也要好看。如果这时候能做个会动的图表,相信一定会加分不少。 动态图表制作的方法很多,根据不同情况,可以使用数据...

安伟星
2017/12/10
0
0
在Entity Framework中使用存储过程(三):逻辑删除的实现与自增长列值返回

本篇文章通过实例的方式,讨论两个在EF使用存储过程的主题:如何通过实体和存储过程的映射实现逻辑删除;对于具有自增长类型主键的数据表,在进行添加操作的时候如何将正确的值反映在实体对象...

长平狐
2012/09/04
213
0
编写更加通用的 JavaScript

当你准备好抽象出一个 Web 组件的时候, JavaScript 能帮你做到,融入组件的 JavaScript 变得优雅利索;此时它像一把瑞士军刀,轻松帮你应对各种场景。但当你急于交付时,JavaScript 也能帮你...

红薯
2011/02/10
653
8

没有更多内容

加载失败,请刷新页面

加载更多

网站优化技术包括哪些内容

网站优化Incapsula超越简单的内容缓存,可以优化网站性能或应用程序的用户体验,优化包括内容缩小、动态文件压缩、图像压缩、会话重用优化、TCP优化和连接预合并。 动态文件压缩,普通的web...

上树的熊
33分钟前
1
0
业界 | Teradata全球调研:四分之三企业分析项目数据科学家“缺货”

当地时间10月15日,2018 Teradata全球用户大会在美国拉斯维加斯举行。来自15个国家的3000多位数据人参与了本次峰会。 大会第一日,Teradata发布了针对“企业数据分析”的2018年调研结果。 调...

Mr_zebra
34分钟前
1
0
java 通过Unsafe不使用构造器直接创建对象

这里有一个User没有无参构造 public class User { static { System.out.println("static {}"); } { System.out.println("{}"); } public User(Strin......

ValSong
36分钟前
2
0
eureka 高可用配置 unavailable-replicas 问题.

在使用spring cloud 配置eureka 高可用配置时.发现配置的节点一直无法获取心跳. eureka控制台界面上一直显示的挂载节点 是 unavailable-replicas 查看日志.就是获取心跳的地址不对. 默认的健...

拖鞋莫止步
37分钟前
2
0
Vue2 模板template的四种写法

<div id="app">    <h1>我是直接写在构造器里的模板1</h1></div> <template id="demo3">    <h1 style="color:red">我是选项模板3</h1></template> <script type="x-t......

粒子数反转
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部