文档章节

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

 小小程序员1644
发布于 2015/12/02 23:19
字数 176
阅读 21
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day58-20180816-流利阅读笔记-待学习

苹果市值破万亿,iPhone 会涨价吗? Lala 2018-08-16 1.今日导读 苹果教父乔布斯曾经说过:“活着就是为了改变世界。”虽然他在 56 岁时就遗憾离世,但他极具创新和变革的精神早已深埋进苹果...

aibinxiao
22分钟前
4
0
[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
2
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部