Question

这是原始代码：（区分大小写）

function searchValue() {
  let srchString = ''

  var searchField = $('#search').val().trim();
  let srchVal = data.filter(val => val.name.includes(searchField))
  srchVal.forEach((item) => {
    srchString += `<a class="list-item" href="${item.url}">${item.name}</a>`
  })
  $('#resultDiv').empty().append(srchString)
}

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": "Machine Learning",
    "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
   }
]

我尝试toLowercase()使其不区分大小写，这是代码：

function searchValue() {
  let srchString = ''
  var searchField = $('#search').val().trim();


  var searchFieldLower = searchField.toLowerCase();
  var shouldToggle = $('#search').text().toLowerCase().indexOf(searchFieldLower) >= 0;
  $('#search').toggle(shouldToggle);

  let srchVal = data.filter(val => val.name.includes(searchFieldLower))

  srchVal.forEach((item) => {
    srchString += `<a class="list-item" href="${item.url}">${item.name}</a>`
  })
  $('#resultDiv').empty().append(srchString)
}
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": "Machine Learning",
    "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
   }
]

我不确定我是否正确使用toLowerCase()，有人可以告诉我我搞砸了哪里还是怎么做？另外，还有哪些其他方法可以做到这一点？

Answer 1

更正此

let srchVal = data.filter(val => val.name.includes(searchFieldLower))

对此：

let srchVal = data.filter(val => val.name.toLowerCase().includes(searchFieldLower))

这样，每次比较名称时，都会先将其转换为小写，然后再进行比较。

Answer 2

尝试一下。将lowecase设置为搜索结果和匹配值

  function searchValue() {
      let srchString = ''
      var searchField = $('#search').val().trim();
      if(searchField){
      let srchVal = data.filter(val => val.name.toLowerCase().indexOf(searchField.toLowerCase())>-1)
      srchVal.forEach((item) => {
        srchString += `<a class="list-item" href="${item.url}">${item.name}</a>`
      })
      }
      $('#resultDiv').empty().append(srchString)
    }

工作小提琴

function searchValue() {
      let srchString = ''
      var searchField = $('#search').val().trim();
      if(searchField){
      let srchVal = data.filter(val => val.name.toLowerCase().indexOf(searchField.toLowerCase())>-1)
      srchVal.forEach((item) => {
        srchString += `<a class="list-item" href="${item.url}">${item.name}</a>`
      })
      }
      $('#resultDiv').empty().append(srchString)
    }


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": "Machine Learning",
    "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date"
   }
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search" onkeyup="searchValue()">
<p id="resultDiv"></p>

如何进行不区分大小写的搜索？

2 个答案: