图：
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);
}
© 著作权归作者所有
