姓名筛选小案例js

 

ajax({
url: 'data.json',
success: function(rs) {
new Name({
data: rs,
ipt: '.ipt',
uls: '.ul'
})
}

})

function Name(opts) {
this.opts = opts;
this.ipt = document.querySelector(this.opts.ipt);
this.uls = document.querySelector(this.opts.uls);
this.bindEvent();
}
Name.prototype = {
constructor: Name,
bindEvent: function() {
var that = this;
var data = this.opts.data;
var str = "";
var temp = [];
this.ipt.oninput = function() {
that.uls.innerHTML = '';
var reg = new RegExp(this.value, 'g');
data.forEach(function(item) {
temp.push(item.name);
// str += `<li>${item.name[0]}</li>`;
for (var i = 0; i < item.name.length; i++) {
if (that.ipt.value == '') {
that.uls.innerHTML = " ";
} else if (reg.test(item.name[i])) {
var li = document.createElement('li');
li.innerHTML = item.name[0];
that.uls.appendChild(li);
}
}
})
}

}
}
</script>

转载于:https://www.cnblogs.com/mapsxy/p/9238925.html