CODEWITHSUNDEEP
jquery
totalitarian
totalitarian

Reputation: 3666

JQuery how to .find() case insensitive?

<Manufacturers>
  <Manufacturer name="abc">
    <flags=""/>
  </Manufacturer><Manufacturer name="abcd">
    <flags=""/>
  </Manufacturer>
  <Manufacturer name="abcde">
    <flags=""/>
  </Manufacturer>
<Manufacturers>

I want to print out the names of just the manufacturers which contain the string 'bc' in the name

This is my attempt so far

      $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
        var $ul = $(this);
        html = "";
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
                type: "GET",
                url: "./Sources.xml",
                datatype: "xml",
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('Error: ' + errorThrown);
                },
                success: function(xml.toLowerCase()) {
                    console.log('AJAX Request is succeded.');

                    $(xml).find('Manufacturer[name*="' + $(data.input).val() + '"]').each(function(){
                        console.log($(this).attr('name'));
                    });
                    $ul.html(html);
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                }
            });

    });

The problem is that .find() is case sensitive. How can I do the same but case insensitive

Upvotes: 7

Views: 7645

Answers (3)

ChadF
ChadF

Reputation: 1758

Rather than building your check into your find, you should match off of "Manufacturer", and then search by the name of the manufacturer and the query both cast to lower case within the function

$(xml).find("Manufacturer").each(function(i){
  console.log($(this)[0].attributes.name.value.toLowerCase().indexOf(query.toLowerCase()) >= 0;
})

Upvotes: 3

David Thomas
David Thomas

Reputation: 253446

I'd suggest the following:

var xml = '<Manufacturers><Manufacturer name="abc"><flags=""/></Manufacturer><Manufacturer name="abcd"><flags=""/></Manufacturer><Manufacturer name="abcde"><flags=""/></Manufacturer><Manufacturers>';

// we create a jQuery objecct from the xml string (above),
// find all the Manufacturer elements,
// filter those elements using the filter() method:
var bcInName = $(xml).find('Manufacturer').filter(function() {
  // keeping only those elements in which the lower-cased 'name'
  // attribute contains the string 'bc':
  return this.attributes["name"].value.toLowerCase().indexOf('bc') > -1;
// using map() to create a map:
}).map(function() {
  // consisting of the value of the name attribute from the
  // elements that we kept in the collection:
  return this.attributes["name"].value;
// using get() to convert the map to an array:
}).get();

// using this to write a log in the 'result' pane of
// of the snippet:
snippet.log(bcInName);

// logging to the console:
console.log(bcInName);


var xml = '<Manufacturers><Manufacturer name="abc"><flags=""/></Manufacturer><Manufacturer name="abcd"><flags=""/></Manufacturer><Manufacturer name="abcde"><flags=""/></Manufacturer><Manufacturers>';



var bcInName = $(xml).find('Manufacturer').filter(function() {
  return this.attributes["name"].value.toLowerCase().indexOf('bc') > -1;
}).map(function() {
  return this.attributes["name"].value;
}).get();

snippet.log(bcInName);
console.log(bcInName);
p::before {
  content: 'Names found: ';
  color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

External JS Fiddle demo, for experimentation.

Incidentally, it's worth noting that, in the Selectors Level 4 Module of CSS, case-insensitive attribute-selectors will – unless the selector is removed from the module at a future point – be allowed via the following notation:

[frame=hsides i] {
    border-style: solid none;
}

Note the space between the hsides and the i identifier, which will:

…style the [element with the] frame attribute when it has a value of hsides, whether that value is represented as hsides, HSIDES, hSides, etc. even in an XML environment where attribute values are case-sensitive.

References:

Upvotes: 2

Mottie
Mottie

Reputation: 86453

According to this jQuery issue, the children() function is case sensitive, so you could use it instead (demo):

var xml = '<Manufacturers><Manufacturer name="abc"><flags=""/></Manufacturer><Manufacturer name="abcd"><flags=""/></Manufacturer><Manufacturer name="abcde"><flags=""/></Manufacturer></Manufacturers>',
  $results = $( xml ).children( 'Manufacturer[name*="' + $(data.input).val() + '"]' );

$( "#result" ).append( '# results = ' + $results.length );

Upvotes: 0

Related Questions