文档章节

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
Axure RP 如何实现下拉框二级联动效果

一、拖一个下拉列表框作为一级 二、拖一个动态面板放二级内容 三、双击动态面板,设置二级内容: 四、双击广东,拖一个下拉列表框作为广东省下的二级下拉框 五、双击二级下拉框,添加广东省下...

一个yuanbeth
11/10
0
0
Windows Phone 7 自动完成输入框控件AutoCompleteBox

自动完成输入框控件AutoCompleteBox是一种很常用的控件,它实现了文本框的输入的自动搜索的功能,可以加快用户的输入效率。该控件在微软的Silverlight 开源控件项目“Silverlight Toolkit”中...

junwong
2012/02/28
529
0

没有更多内容

加载失败,请刷新页面

加载更多

Function函数式接口

Function函数式接口传入一个参数,返回一个值。 然后我们使用这个写个demo看看: 输出: 接口内部还有两个default方法和一个static方法,然后我们先看一下static方法 返回一个始终返回其输入...

woshixin
11分钟前
0
0
开发者和架构师之间最大的区别是什么?

1、开发者和架构师之间最大的区别是什么? 架构师和开发者一样,也经常写代码,简单的说,开发者和架构师之间最大的区别就是技术领导力。 软件架构师的角色需要理解最重要的架构驱动力是什么...

James-
42分钟前
1
0
java框架学习日志-4

补充一些spring配置文件的方法。 设置别名: <!--通过name直接设置别名--> <bean name="user2" class="cn.sxt.factory.UserDynamicFactory"> </bean> <!--有id的情况下也可以设置......

白话
44分钟前
2
0
20181213 上课截图

小丑鱼00
今天
1
0
nginx+php-fpm配置后页面显示空白的解决方法以及用nginx和php-fpm解决“502 Bad Gateway”问题

https://stackoverflow.com/questions/15423500/nginx-showing-blank-php-pages For reference, I am attaching my location block for catching files with the .php extension: location ~......

Yao--靠自己
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部