Question

我有这个JSON文件，如何使用搜索字段/输入/搜索框通过name进行搜索？就像我按下“搜索”按钮时一样，匹配搜索词的结果将以div的形式依次显示

[
  {
   "name": "Senior Officer Trade Back Office",
   "url": "https://www.blockworks.com/senior-officer-trade-back-office-1061445-jv/?source=searchResults&searchType=1&placement=1&sortBy=date"
  },
  {
   "name": "Junior Officer Trade Back Office",
   "url": "https://www.blockworks.com/junior-officer-trade-back-office-1061443-jv/?source=searchResults&searchType=1&placement=2&sortBy=date"
  },
  {
   "name": "5 Machine Learning",
   "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
  },
  {
   "name": "3 Ruby Developers",
   "url": "https://www.blockworks.com/3-ruby-developers-1061441-jv/?source=searchResults&searchType=1&placement=4&sortBy=date"
  },
  {
   "name": "Sales Staff (Losgistic - Salary Attractive)",
   "url": "https://www.blockworks.com/sales-staff-losgistic-salary-attractive-1061440-jv/?source=searchResults&searchType=1&placement=5&sortBy=date"
  },
  {
   "name": "5 Front-End Developers",
   "url": "https://www.blockworks.com/5-front-end-developers-2-1061439-jv/?source=searchResults&searchType=1&placement=6&sortBy=date"
  }
]

这是我对JQuery感兴趣的新节目之一，请显示怜悯，谢谢

我尝试过：（这是即时搜索keyup）

$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('data.json', function(data) {
   $.each(data, function(key, value){
    if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
    }
   });   
  });
 });

 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });
});

Answer 1

使用数组过滤器获取对象数组，其中名称包括输入中类型的文本。您可以在代码的searchValue内放置函数$.each的主体

let data = [{
    "name": "Senior Officer Trade Back Office",
    "url": "https://www.blockworks.com/senior-officer-trade-back-office-1061445-jv/?source=searchResults&searchType=1&placement=1&sortBy=date"
  },
  {
    "name": "Junior Officer Trade Back Office",
    "url": "https://www.blockworks.com/junior-officer-trade-back-office-1061443-jv/?source=searchResults&searchType=1&placement=2&sortBy=date"
  },
  {
    "name": "5 Machine Learning",
    "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
  },
  {
    "name": "3 Ruby Developers",
    "url": "https://www.blockworks.com/3-ruby-developers-1061441-jv/?source=searchResults&searchType=1&placement=4&sortBy=date"
  },
  {
    "name": "Sales Staff (Losgistic - Salary Attractive)",
    "url": "https://www.blockworks.com/sales-staff-losgistic-salary-attractive-1061440-jv/?source=searchResults&searchType=1&placement=5&sortBy=date"
  },
  {
    "name": "5 Front-End Developers",
    "url": "https://www.blockworks.com/5-front-end-developers-2-1061439-jv/?source=searchResults&searchType=1&placement=6&sortBy=date"
  }
]

function searchValue() {
  let srchString = ''
  var searchField = $('#search').val().trim();
  let srchVal = data.filter(val => val.name.includes(searchField))
  srchVal.forEach((item) => {
    srchString += `<li>${item.name}<img src='${item.url}'</li>`

  })
  $('#resultDiv').empty().append(srchString)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id='search'>
<input type="button" value='Search' onclick='searchValue()'>
<div id='resultDiv'></div>

Answer 2

那是什么意思？：

const srcData = [
  {
   "name": "Senior Officer Trade Back Office",
   "url": "https://www.blockworks.com/senior-officer-trade-back-office-1061445-jv/?source=searchResults&searchType=1&placement=1&sortBy=date"
  },
  {
   "name": "Junior Officer Trade Back Office",
   "url": "https://www.blockworks.com/junior-officer-trade-back-office-1061443-jv/?source=searchResults&searchType=1&placement=2&sortBy=date"
  },
  {
   "name": "5 Machine Learning",
   "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
  },
  {
   "name": "3 Ruby Developers",
   "url": "https://www.blockworks.com/3-ruby-developers-1061441-jv/?source=searchResults&searchType=1&placement=4&sortBy=date"
  },
  {
   "name": "Sales Staff (Losgistic - Salary Attractive)",
   "url": "https://www.blockworks.com/sales-staff-losgistic-salary-attractive-1061440-jv/?source=searchResults&searchType=1&placement=5&sortBy=date"
  },
  {
   "name": "5 Front-End Developers",
   "url": "https://www.blockworks.com/5-front-end-developers-2-1061439-jv/?source=searchResults&searchType=1&placement=6&sortBy=date"
  }
]
document.getElementById('searchfield').addEventListener('keyup', function(){
  let pattern = new RegExp(this.value, 'i');
  let resultSet = srcData.filter(item => item.name.match(pattern) && this.value != '').map(item => `<a href="${item.url}">${item.name}</a>`).join(', ');
  document.getElementById('searchresult').innerHTML = resultSet;
});

#searchresult {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid black;
}

<input id="searchfield"></input>
<div id="searchresult"></div>

搜索JSON数据并以html显示

2 个答案: