- html,body{
- height: 100%;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- .main{
- width: 300px;
- margin: 80px auto;
- }
- .auto-complate input{
- width: 200px;
- height: 20px;
- padding: 0;
- }
- .auto-complate ul{
- padding: 0;
- margin: 0;
- }
- .auto-complate li{
- list-style: none;
- }
- .filter-container img{
- width: 80px;
- }
- .filter-container{
- display: flex;
- align-items: center;
- border: 1px solid #666666;
- }
- <div class="main">
- <div class="auto-complate">
- <input type="text" id="textDate" placeholder="请输入关键词">
- <ul id="filterList">
- </ul>
- </div>
- </div>
- var textInput = document.querySelector('#textDate')
- var filterList = document.querySelector('#filterList')
- // 数据源
- var data = [{
- name:'王子豪',
- id:1,
- pinyin:'wangzihao'
- },
- {
- name:'小强',
- id:2,
- pinyin:'xiaoqiang'
- },
- {
- name:'杨日华',
- id:3,
- pinyin:'yangrihua'
- },
- {
- name:'万克浩',
- id:4,
- pinyin:'wankehao'
- }]
- function doFileter(key){
- key = key.toLowerCase()
- // 把字符串转化为小写
- return data.filter(function(item){
- if(item.name.indexOf(key) > -1 || item.id.toString().indexOf(key) > -1){
- return item
- }
- })
- }
- function binhdhtml(key){
- var arr = doFileter(key)
- var str = ''
- for(var i = 0;i <arr.length;i++){
- str += '<li>'
- str += '<div class="filter-container"><span>' + arr[i].name + '</span><img src="http://wx4.sinaimg.cn/mw690/9e5389bbly1fhzpxlonefj20go0gon1i.jpg"></div>'
- str +='</li>'
- }
- filterList.innerHTML =str
- }
- textInput.onkeyup = function(){
- var key = textInput.value
- binhdhtml(key)
- }
现在不到万不得已，都不想折腾代码了，还是看看文章写写文章比较好
博客数据越多越不敢折腾代码，我觉得要折腾的话，搞个新站专门折腾。
博主又是一个技术控
最近学习前端开发，就发一些笔记上去
现在你们搞技术的工资不错吧
我是看到代码都是很头疼的哦
我现在还在学习，培训中，工资得看在哪吧，大城市还好，二三线的就一般了
搞互联网的那个跑小城市哦
思想都没传达到
肯定在大城市了哦