How to search at element's value?

Question

Here is my code:

if($('span').text().indexOf("t")){
  console.log($('span').text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

The result should be just three and two in console. Because just they contain t letter. But as you see all values will be shown in the console.

As I've mentioned, I'm trying to make a small search engine for a autocomplete box. How can I fix it?

Answer 1

You can to use contains selector:

$('span:contains("t")').each(function(){
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

Answer 2

As per the documentation text() method returns a string containing the combined text of all matched elements that what it showing in your console, instead you need to iterate over them. Even though your condition is wrong, which only fails when the index is 0(0 is falsy value and all other integer values are truthy in Javascript), it should be .indexOf("t") > -1.

$('span').each(function() {
  if ($(this).text().indexOf("t") > -1)
    console.log($(this).text());
})

// or use text() method with callback which holds 
// old value as second argument and iterates internally
$('span').text(function(i, txt) {
  if (txt.indexOf("t") > -1)
    console.log(txt);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

---

The simplest way is to use CSS :contains() pseudo-class selector and iterate over the elements using each() method.

$('span:contains("t")').each(function() {
  console.log($(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

---

UPDATE : You can use map() method with get() method to get as an array.

console.log($('span:contains("t")').map(function() {
  return $(this).text();
}).get())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

Answer 3

$('span') selects all the span elements on the page. If you need to work with them individually, you need to loop over all the span elements and test the condition on individual items. You can use .each function for this.

Also, indexOf returns -1 if the string doesn't contain the argument, so you need to compare it with -1.

$('span').each(function () {
  if($(this).text().indexOf("t") != -1){
     console.log($(this).text());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

Answer 4

You should loop through the elements and check the values using > operator:

$('span').each(function() {
  if ($(this).text().indexOf("t") > -1) {
    console.log($(this).text());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>

You can read more about each() method here.

Answer 5

$('span').text() return linked text of every span in array, so you must iterate through span elements with for, or each (jQuery) method:

 $('span').each(function () {
    if($(this).text().indexOf("t") > 0){
        console.log($(this).text());
    }
 });

 var elems = $('span');
 for(var i=0; i<elems.length; i++){
     if($(elems[i]).text().indexOf("t") > 0){
        console.log($(this).text());
    }
 }