Mostrar div en función de una búsqueda

Tengo un pequeño problema con un script que quiero encontrar y mostrar diferentes divs dependiendo de la búsqueda. El script original es algo que encontré y usé para una lista de contactos, y que ahora quiero configurar para hacer otra cosa. Código original (JSFiddle)

Mi código editado:

$('.Fruit').hide(); $('#search').click(function() { $('.Fruit').hide(); var txt = $('#search-criteria').val(); $('.Fruit').each(function() { if ($(this).id.toUpperCase().indexOf(txt.toUpperCase()) != -1) { $(this).show(); } }); }); 
    

Some text about apples

Some text about oranges

No sé si entiendes lo que estoy tratando de lograr …? Tengo, en este caso, dos divs – Apple y Orange. Por defecto, ambos están ocultos, pero si ingreso a Apple por ejemplo en el campo de búsqueda y presiono el botón de búsqueda, aparecerá el div “Apple”, y si en cambio busco “Orange”, obviamente quiero que el div “Orange” espectáculo. Si busco algo más, nada se mostrará, siempre y cuando no haya un div con un ID que coincida con la palabra de búsqueda.

Básicamente, estoy tratando de construir una base de datos de contenido precargado que se pueda buscar y mostrar sobre la marcha sin volver a cargar la página.

El error es, por lo que puedo entender, cuando trato de abordar y comparar la ID de divs con la palabra de búsqueda en la fila 6 en el JS. ¿Alguien sabe cómo hacer esto, y hacer que esto funcione? ¿O alguien tiene otra solución que puede realizar esta tarea?

El problema es porque los objetos jQuery no tienen una propiedad de id . Necesitas usar prop('id') o solo this.id

También tenga en cuenta que puede mejorar su lógica haciendo que los atributos de id coincidan con minúsculas, luego convierta la entrada a minúsculas, luego puede usar un selector normal, como este:

 $('#search').click(function() { var txt = $('#search-criteria').val(); if (txt) $('.fruit').hide().filter('#' + txt.toLowerCase()).show(); }); 
 .fruit { display: none; } 
    

Some text about apples

Some text about oranges