按 Javascript 从对象中搜索数据

Question

我在数组对象中搜索数据并显示它时遇到一点问题。

我有一个人 JSON 对象，您可以从下面的代码片段中看到。

我可以加载所有的人，但是当我在输入中输入名字时，我如何显示其他人隐藏的人？这是我正在做的事情：

const people = [{
    "name": "Messi",
    "age": 34
  },
  {
    "name": "Pedri",
    "age": 18
  },
  {
    "name": "Ronaldo",
    "age": 37
  }
];

function loadData() {
  people.forEach(function(person) {
    const container = document.createElement('div');
    $(container).addClass('person');

    const name = document.createElement('p');
    const age = document.createElement('p');

    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);

    document.getElementById('people').appendChild(container);
  })
}

function searchData(query) {

}

loadData();

window.onload = () => {
  const search = document.getElementById('search');
  search.onkeyup = () => {
    searchData(search.value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <input id="search" type="text" name="" value="">
    <div id="people" class="people">
    </div>
  </div>
</body>

Answer 1

你可以使用过滤器

people.filter(person=> person.name === query)

或者如果你只需要一个，你可以使用 find

people.find(person=> person.name === query)

Answer 2

不完全，但你可以这样做。 )

const people = [
  {
    "name":"Messi",
    "age":34
  },
  {
    "name":"Pedri",
    "age":18
  },
  {
    "name":"Ronaldo",
    "age":37
  }
];

function loadData() {
  people.forEach(function(person) {
    const container = document.createElement('div');
    $(container).addClass('person');

    const name = document.createElement('p');
    const age = document.createElement('p');

    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);

    document.getElementById('people').appendChild(container);
  })
}

function searchData(query) {
  people.forEach(function(person) {  
    if(query == person['name']){
     $('#people').empty();
    
    const container = document.createElement('div');
    $(container).addClass('person');

    const name = document.createElement('p');
    const age = document.createElement('p');

    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);

    document.getElementById('people').appendChild(container);
  }
});
};

loadData();

window.onload = () => {
  const search = document.getElementById('search');
  search.onkeyup = () => {
    searchData(search.value);
  }
}

<body>
  <div class="wrapper">

    <input id="search" type="text" name="" value="">

    <div id="people" class="people">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>

Answer 3

此代码段动态删除输入字段中写入的查询中未包含的名称

const people = [{
    "name": "Messi",
    "age": 34
  },
  {
    "name": "Pedri",
    "age": 18
  },
  {
    "name": "Ronaldo",
    "age": 37
  }
];

function loadData() {
  people.forEach(function(person) {
    const container = document.createElement('div');
    $(container).addClass('person');
    $(container).attr('name', person['name']);
    $(container).attr('hidden', true);

    const name = document.createElement('p');
    const age = document.createElement('p');

    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);

    document.getElementById('people').appendChild(container);
  })
}

function searchData(query) {

  const people = document.getElementsByClassName('person');
  
  for (let i = 0; i < people.length; i++) {
    name = people[i].getAttribute('name').toLowerCase();
        
    if (query.length > 0 && name.includes(query.toLowerCase())) {
      people[i].removeAttribute('hidden');
    } else {
        people[i].setAttribute('hidden', true);
    }
  }
}

loadData();

window.onload = () => {
  const search = document.getElementById('search');
  search.onkeyup = () => {
    searchData(search.value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <input id="search" type="text" name="" value="">
    <div id="people" class="people">
    </div>
  </div>
</body>

const people = [{
    "name": "Messi",
    "age": 34
  },
  {
    "name": "Pedri",
    "age": 18
  },
  {
    "name": "Ronaldo",
    "age": 37
  }
];

function loadData() {
  people.forEach(function(person) {
    const container = document.createElement('div');
    $(container).addClass('person');

    const name = document.createElement('p');
    const age = document.createElement('p');

    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);

    document.getElementById('people').appendChild(container);
  })
}

function searchData(query) {
}

loadData();

window.onload = () => {
  const search = document.getElementById('search');
  search.onkeyup = () => {
    searchData(search.value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <input id="search" type="text" name="" value="">
    <div id="people" class="people">
    </div>
  </div>
</body>

Answer 4

简化代码，不区分大小写的搜索可能是这样的：

const people = [{
    "name": "Messi",
    "age": 34
  },
  {
    "name": "Pedri",
    "age": 18
  },
  {
    "name": "Ronaldo",
    "age": 37
  }
];
var searchInput = $('#search');
var peopleDiv = $('#people');
function loadData(q = '') {
  var peopleHtml = '';
  $.each(people, function(p, person) {
    if (person.name.toLowerCase().includes(q.toLowerCase())) {
      peopleHtml += '<div class="person">' + person.name + ': ' + person.age + '</div>';
    };
  });
  peopleDiv.html(peopleHtml);
}
searchInput.on('input', function(e) {
  loadData($(this).val());
});
loadData();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <input id="search" type="text" name="" value="">
  <div id="people" class="people"></div>
</div>

也在 JSFiddle

Answer 5

您可以使用数据属性，例如 data-name 和 data-age。您可以通过以下方式将这些属性附加到容器 div.person：

container.dataset.name = person["name"];
container.dataset.age = person["age"];

在 searchData() 中，您将首先显示所有带有 $('.person').show(); 的人，然后隐藏不以查询字符串开头的人。例如：

$('.person:not([data-name^="' + query + '"])').hide();

但只有在有搜索结果时才会隐藏它们。例如：

if($('.person[data-name^="' + query + '"]').length != 0) {
    $('.person:not([data-name^="' + query + '"])').hide();
}

您可以使用 toLowerCase() 和 toUpperCase() 扩展函数，使搜索不区分大小写：

function searchData(query) {
  $('.person').show();
  
  if($('.person[data-name^="' + query.toLowerCase() + '"]').length != 0) {
    $('.person:not([data-name^="' + query.toLowerCase() + '"])').hide();
  }
  
  if($('.person[data-name^="' + query.toUpperCase() + '"]').length != 0) {
    $('.person:not([data-name^="' + query.toUpperCase() + '"])').hide();
  }
  
  if($('.person[data-age^="' + query + '"]').length != 0) {
    $('.person:not([data-age^="' + query + '"])').hide();
  }
}

工作示例：

const people = [{
    "name": "Messi",
    "age": 34
  },
  {
    "name": "Redri",
    "age": 18
  },
  {
    "name": "Ronaldo",
    "age": 37
  }
];

function loadData() {
  people.forEach(function(person) {
    const container = document.createElement('div');
    container.dataset.name = person["name"];
    container.dataset.age = person["age"];
    $(container).addClass('person');

    const name = document.createElement('p');
    const age = document.createElement('p');
    $(name).addClass('name');
    $(age).addClass('age');

    name.appendChild(document.createTextNode(person["name"]));
    age.appendChild(document.createTextNode(person["age"]));

    container.appendChild(name);
    container.appendChild(age);
    
  document.getElementById('people').appendChild(container);
  })
}

function searchData(query) {
  $('.person').show();
  
  if($('.person[data-name^="' + query.toLowerCase() + '"]').length != 0) {
    $('.person:not([data-name^="' + query.toLowerCase() + '"])').hide();
  }
  
  if($('.person[data-name^="' + query.toUpperCase() + '"]').length != 0) {
    $('.person:not([data-name^="' + query.toUpperCase() + '"])').hide();
  }
  
  if($('.person[data-age^="' + query + '"]').length != 0) {
    $('.person:not([data-age^="' + query + '"])').hide();
  }
}

loadData();

window.onload = () => {
  const search = document.getElementById('search');
  search.onkeyup = () => {
    searchData(search.value);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <input id="search" type="text" name="" value="">
    <div id="people" class="people">
    </div>
  </div>
</body>

按 Javascript 从对象中搜索数据

Search Data from Object By Javascript

html

javascript

css

search

object