I am not having problems to creating it, my problem is: when i try to detect empty return. I prepared jsFiddle to inspect, click "B" for what i seek but with a solid way.

Basicly i'm trying to check if result is empty with clever way?

jsFiddle example.

jQuery:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();;
    filters.parent().hide();

    filters.each(function(i) {
        var pareFirstLetter = $(this).text().substr(0,1);
        if ( pareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
        }

        //problem on detecting empty one. Press 'B' for example.
        //i can reach manually but this way is useless
        if (takeLetter ==='B') {console.log('There is no result.');}
    });

});

​

html:

<ul class="alphabet">
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
    <li><a>...</a></li>
</ul>

<ul class="medical_dictionary">
      <li><strong>Abdominoplasti</strong>: Lorem ipsum.</li>
      <li><strong>Absans</strong>: Lorem ipsum.</li>
      <li><strong>Abse</strong>: Lorem ipsum.</li>
      <li><strong>....</strong>: Lorem ipsum.</li>
</ul>

I am not having problems to creating it, my problem is: when i try to detect empty return. I prepared jsFiddle to inspect, click "B" for what i seek but with a solid way.

Basicly i'm trying to check if result is empty with clever way?

jsFiddle example.

jQuery:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();;
    filters.parent().hide();

    filters.each(function(i) {
        var pareFirstLetter = $(this).text().substr(0,1);
        if ( pareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
        }

        //problem on detecting empty one. Press 'B' for example.
        //i can reach manually but this way is useless
        if (takeLetter ==='B') {console.log('There is no result.');}
    });

});

​

html:

<ul class="alphabet">
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
    <li><a>...</a></li>
</ul>

<ul class="medical_dictionary">
      <li><strong>Abdominoplasti</strong>: Lorem ipsum.</li>
      <li><strong>Absans</strong>: Lorem ipsum.</li>
      <li><strong>Abse</strong>: Lorem ipsum.</li>
      <li><strong>....</strong>: Lorem ipsum.</li>
</ul>

• javascript
• jquery
• html
• list
• filter

5 Answers 5

Try following:

Note that I have added new variable found which is set as false whenever new alphabet is clicked. This is variable is set to true as soon as dictionary entry is found matching the letter.

Now same variable is checked after the loop to check relevant entries were found or not to display no result if no entry is found.

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    var found = false;
    filters.parent().hide();

    filters.each(function(i) {
        var pareFirstLetter = $(this).text().substr(0,1);
        if ( pareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
            found = true;
        }
    });
    if (!found) {console.log('There is no result.');}
});

Your alert will always be triggered the moment the second element of filters is reached. How about:

triggers.click(function() {
    var takeLetter = $(this).text(), result = 0;
    filters.parent().hide();

    filters.each(function(i) {
        if ( RegExp('^'+takeLetter).test($(this).text()) ) {
            result += 1;
            $(this).parent().fadeIn(222);
        }
    });
    if (result<1) {alert('There is no result.');}
});

See this jsfiddle ​

I rewrote it (only the JavaScript, not the HTML) as follows: jsFiddle.

What I'm doing is I'm first filtering the entries based on the capitalized letters, and then returning from the function if no elements are found.

If elements are found though, I iterate only on them subset for displaying them.

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var availableResults = filters.filter(function (f) {
        return $(this).text()[0] === takeLetter;
    });

    if (!availableResults.length) {
        console.log('There is no result.');
        return;
    }

    availableResults.each(function(i) {
        $(this).parent().fadeIn(222);
    });
});

​

I changed your code to add a class like .letter-A to each strong element - then you can just count/hide/show these. I think this is a bit simpler:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

filters.each(function(){
    $(this).addClass('letter-' + $(this).text().substr(0,1));
});

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var matches = filters.filter('.letter-' + takeLetter);
    matches.parent().fadeIn(222);

    if (matches.length == 0) {
        alert('There is no result for ' + takeLetter);
    };

});
​

See the fiddle: http://jsfiddle/adamh/AeGQt/31/

You need a sort of counter.

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
var takeLetter = $(this).text();;
var matches = filters.length;
filters.parent().hide();

filters.each(function(i) {
    var pareFirstLetter = $(this).text().substr(0,1);
    if ( pareFirstLetter ==  takeLetter ) {
        $(this).parent().fadeIn(222);
    }

    if (takeLetter != pareFirstLetter)
        matches--;
});

if (matches == 0)
    console.log('There is no result.');
});

http://jsfiddle/jezen/AeGQt/34/