CODEWITHSUNDEEP
javascript
catlover69
catlover69

Reputation: 35

How do I make a case-insensitive search?

Here's the original code: (case-sensitive)

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"
   }
]

I tried toLowercase() to make it case-insensitive, here's the code: 

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"
   }
]

Im not sure if I'm using toLowerCase() right, can any one show me where I had messed up or how to do it? Also, what are some other approachs to this?

Upvotes: 0

Views: 72

Answers (2)

prasanth
prasanth

Reputation: 22500

Try this.Set lowecase to seach result and matched value

  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)
    }

working fiddle

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>

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

Correct this

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

to this:

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

That way every time a name is compared, it would be converted to lowercase before being compared.

Upvotes: 1

Related Questions