属性选择器与搜索过滤实例页面

展示

重庆市
哈尔滨市
长春市
兰州市
北京市
杭州市
长沙市
沈阳市
成都市
合肥市
天津市
西安市
武汉市
济南市
广州市
南京市
上海市
昆明市
郑州市
贵阳市
西宁市
海口市
南昌市
香港特区
澳门特区

代码

HTML：

<input type="search" id="input" placeholder="输入城市名称或拼音" />
<ul> 
    <li data-search="重庆市chongqing">重庆市</li>
    <li data-search="哈尔滨市haerbing">哈尔滨市</li>
    <li data-search="长春市changchun">长春市</li>
    ...
</ul>

JS：

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// 文本框输入
input.addEventListener("input", function() {
    var value = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'"]) { display: none; }' : '';
});