使用json假数据进行简单模糊查询

1,先在html页面构建一个输入框(输入框要绑定onchange事件)

		

2,再创建一个

    标签便于将查询到的内容显示在
      标签中

      • XXXX

      3,在js中获取这两个标签中并引用json假数据

                  let data;
      			let ul = document.getElementById('ul');
      			let inp = document.getElementById('inp')
      			let arr = new XMLHttpRequest();
      			arr.open('GET', 'js/new_file.json');
      			arr.send();
      			arr.onreadystatechange = function() {
      				if (arr.readyState == 4 && arr.status == 200) {
      					let at = arr.responseText;
      					data = JSON.parse(at);
      				}
      			}

      4,通过onchange事件进行查询

      function out() {
      				let str = '';
      				let input = inp.value;
      				for (let i = 0; i < data.length; i++) {
      					if (data[i].name.indexOf(input) > -1) {
      						str += '
    • ' + data[i].name + '
    • ' } } ul.innerHTML = str;

你可能感兴趣的:(json,javascript,开发语言)