Question 36959 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery text inside each function search bar

It prints an empty string, supposed to print "Admin" and hide the elements that don’t contains the searchBar text, keyUp is being triggeree, it just gives me an empty string when i console.log($(this).text()), searchBar is an input field to search things in a list

const searchBar = $(".users-layout .search input")
searchBar.on("keyup", () => {
  if (searchBar.val() != "") {
    $(".users-list-name").each(() => {
      if (!$(this).text().toLowerCase().includes(searchBar.val().toLowerCase())) {
        console.log($(this).text())
        $(this).hide()
      } else {
        console.log($(this).text())
        $(this).show()
      }
    })
  }
})
<div class="users-list">
  <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a>
  <div class="content">
    <div class="details">
      <span class="users-list-name">Admin</span>
      <p>Test Message</p>
    </div>
  </div>
  <div class="status-dot"><i class="fas fa-circle"></i></div>
</div>
<div class="users-list">
  <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a>
  <div class="content">
    <div class="details">
      <span class="users-list-name">Admin</span>
      <p>Test Message</p>
    </div>
  </div>
  <div class="status-dot"><i class="fas fa-circle"></i></div>
</div>

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    at the end i resolved like this

    searchBar.on("keyup", ()=>{
  if (searchBar.val() != "") {
    $(".users-list-name").each((i, obj)=>{
      console.log($(obj))
      if (!$(obj).text().toLowerCase().includes(searchBar.val().toLowerCase())){
        $(obj).parent().parent().parent().hide()
      } else {
        $(obj).parent().parent().parent().show()
      }
    }
  )
} else {
  $(".users-list").show()
}
})

  2. 0

    this was refering to the window. I fixed it so it grabs the actual element: let elem = $(".users-list-name")[index]

    const searchBar = $(".users-layout .search input")
searchBar.on("keyup", () => {
  if (searchBar.val() != "") {
    $(".users-list-name").each(index => {
    let elem = $(".users-list-name")[index]
      if (!$(elem).text().toLowerCase().includes(searchBar.val().toLowerCase())) {
        console.log($(elem).text())
        $(elem).hide()
      } else {
        console.log($(elem).text())
        $(elem).show()
      }
    })
  }
})
    <div class="users-layout">
  <div class="search">
    <input />
  </div>
</div>

<div class="users-list">
  <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a>
  <div class="content">
    <div class="details">
      <span class="users-list-name">Admin</span>
      <p>Test Message</p>
    </div>
  </div>
  <div class="status-dot"><i class="fas fa-circle"></i></div>
</div>
<div class="users-list">
  <a href="#" class="back-icon"> <i class="fas fa-arrow-left"></i></a>
  <div class="content">
    <div class="details">
      <span class="users-list-name">Admin</span>
      <p>Test Message</p>
    </div>
  </div>
  <div class="status-dot"><i class="fas fa-circle"></i></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search