Javascript Keyup Search of Child Div Value - javascript

I have a list of tasks that I would like to create a search function for. I have managed to have it so that as soon as you start typing, the list responds and hides all incorrect results. However I am still unable to show the correct result.
Codes are below
UPDATED WITH CORRECT SOLUTION
HTML
<input type="text" id="search" placeholder="Player Search" />
<div id="todo">
<div class="task">Task 1</div>
<div class="task">Task 2</div>
<div class="task">Task 3</div>
</div>
Javascript
var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$(".task").show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).show()
console.log(result)
$(".task").eq(result).show();
}
})
As I have only started learning javascript, I would appreciate if you could explain my errors, and a laymen step-by-step explanation of the answer/process.
As a bonus, if you could also explain how one would troubleshoot a javascript problem like this to find the underlying problem, that would be appreciated.

var $div = $("#todo")
var result;
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$div.show()
else {
$(".task").hide()
result = $("#todo .task").filter(function() { //Updated to match child of id todo
return -1 != $(this).text().toUpperCase().indexOf(val)
}).index()//get the index of the div that has match
console.log(result)
result != -1 ? $(".task").eq(result).show() : $(".task").hide()//show or hide div depending on matching index
}
})
DEMO
Always remember ID should always be unique in same context.
Use class to target multiple elements.

function SearchContactInGroup(Strtext) {
$('#userchat_grouping .name').each(function () {
if ($(this).text().toLowerCase().indexOf(Strtext.toLowerCase())>= 0) {
$(this).closest('li').show('slow');
}
else {
$(this).closest('li').hide('slow');
}
});
// $('#dvLoading').hide();
}
$(window).load(function () {
$('#txtsearch').keyup(function () {
SearchContactInGroup($(this).val());
});});

Related

Searching throught data-value on keyup

So, I while I type I need to show elements with certain text that is equals data-value="certain text". I've tried several ways, but nothing seems to work.
Here is what I have so far.
$(".search").keyup(function () {
var filter = $(this).val(), count = 0;
$(".element-holder .element").each(function () {
var current = $('.element').attr('data-name');
if ($(".element[data-name='" + current + "']").text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
});
This is what I need help with ;l
#Edit
HTml here
<div class="element-holder ">
<div class="element" data-name='Adam' id='1'>
</div>
<div class="element" data-name='Eva' id='32'>
</div>
<div class="element" data-name='Sara' id='412'>
</div>
</div>
Please try below
$(".search").keyup(function () {
var filter = $(this).val(), count = 0;
$(".element-holder .element").each(function () {
var current = $('.element').attr('data-name');
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search"/>
<div class="element-holder ">
<div class="element" data-name='Adam' id='1'>How to Format
</div>
<div class="element" data-name='Eva' id='32'>How to Edit
</div>
<div class="element" data-name='Sara' id='412'>Searching throught data-value on keyup
</div>
</div>
Lot of mistakes in your html .
spelling mistakes of element class used.
You did not show the search input html.
Different data attribute name.
If you are using each and make use of $(this) to select current element
Checkout my below demo
$(".search").keyup(function () {
var entered = $(this).val();
$(".elemnet").each(function () {
var text = $(this).html();
if(entered !="")
{
if(text.indexOf(entered) > -1)
{
$(this).show();
}else
{
$(this).hide();
}
}else{
$(".elemnet").hide();
}
});
});
Working Demo
Demo using data attribute
Searching through the entire DOM on each keyup is going to cause a huge performance drop. Cache your results
Throttle your keyup event to only fire the filter when the user pauses typing
Re use your regular expression instead of re creating it multiple times inside your loop
```
// Cache your elements before hand
var namedElements = $(".element-holder .element");
// inside your throttled keyup event handler
// Check for empty strings
var filter = (this.value || "").trim(),
regex = new RegExp(filter, 'i');
var toShow = namedElements.filter(function(index, element) {
var dataName = element.data("name");
return regex.test(dataName);
});
toShow.show();
var toHide = namedElements.filter(function(index, element) {
var dataName = element.data("name");
return !regex.test(dataName);
});
toHide.hide();
```

Search for Text inside div

The problem is: I have one div that wraps all my users list. I want to make a search box, but i don't want to use Ajax, so i started trying JQuery, for search the text inside the div and hide the another results. I've tried but i'm stucked on this:
//Search Box
$(document).on('input', "#search-weeazer", function(e){
console.log('input ativado')
if($(this).val().length >= 4){
// if($('#colmeia-chat').html().indexOf($(this).val()) > -1){
// console.log('Found')
// } else {
// console.log('Not Found')
// }
$('div.chat-users>div').each(function(i,div){
if($(div).html().indexOf($(div).val()) > -1){
console.log($(div).html() + ' found: ' + i);
} else {
console.log("Not Found")
}
});
}
});
Someone know how i can do this?
Thanks!
In my HTML i have this:
<div class="chat-users" style="height: 400px;">
<?php include_once('user-chat-list.php'); ?>
</div>
Inside "chat-users" i have a list with all users, loaded with php
Here is more HTMl to show the structure:
https://jsfiddle.net/jdqbnz2w/
After Question Edit
Here is an updated JSFiddle based on the JSFiddle you included showing how to implement the search with your particular use-case:
JSFiddle
Original Answer:
You're missing some pertinent information in your question, such as "what does the HTML look like that comes from user-chat-list.php?" And because of that it makes it hard to understand exactly how your code applies.
Nevertheless, here is a simple example upon what you have provided that you can modify that does what you are looking for. You can run the following code snippet to see a working example:
var $searchBox = $('#search-weeazer');
var $userDivs = $('.chat-users div');
$searchBox.on('input', function() {
var scope = this;
if (!scope.value || scope.value == '') {
$userDivs.show();
return;
}
$userDivs.each(function(i, div) {
var $div = $(div);
$div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input id="search-weeazer">
<p>Users:</p>
<div class="chat-users">
<div>Tony</div>
<div>Amber</div>
<div>Ronald</div>
</div>

jquery isotope version 2 message if no result

I am using jquery isotope, to filter results, as:
<div class="isotope">
<div class="filter-item">1</div>
<div class="filter-item">2</div>
<div class="filter-item">3</div>
</div>
JS Code:
<script>
$( function() {
var $container = $('.isotope');
if ( !$container.data('isotope').filteredItems.length ) {
$container.html("Sorry.No result");
}
</script>
I am trying to display - Message, if no results in filter process.
But its not working, any clues ?
You can use this with isotope 'arrangeComplete' event:
$container.on( 'arrangeComplete', function( event, filteredItems ) {
var resultCount = filteredItems.length;
if(resultCount == 0) {
$container.html("Sorry.No result");
}
});
You need to actually check if the length has a value.
if ( $container.data('isotope').filteredItems.length > 0)
You are missing the '>0' so will always get a truthy value. Also remove the !.
I spent a while trying to get this to work in Vanilla JS and thought I'd share my working solution for anyone else trying to do a "No results found" message without Jquery:
// ...after buttonclick detected
// set filter for Isotope
iso.arrange({ filter: filterValue });
// No results check
var noResults = document.querySelector('.no-results');
if (iso.filteredItems.length == 0) {
noResults.classList.add('visible');
}
else {
noResults.classList.remove('visible');
}

Making a dropdown find() faster

I have a dropdown box and an input that is used to autofilter the dropdown.I need to make a dropdown filtering faster. I've added a textbox before the dropdown menu and an event to filter the dropdown:The code snippet is:
td.prepend(' <span class="ms-metadata"><br/>(type some chars to filter )</span><br/>');
.....
td.prepend($('<input/>', {id: 'DPFilter',
onkeyup: 'filterDP(this)'
}));
and on the function filterDP(element) :
....
var value = $(element).val();
$( dropdown).find("option").each(function() {
var optionValue = $(this).val();
$(dropdown).find('option[value="' + optionValue + '"]').map(function () {return $(this).parent('span').length === 0 ? this : null;})
.wrap('<span>')
$(this).map(function () { return $(this).parent('span').length === 0 ? this : null;}).wrap('<span>').hide();
...
if ((value == "") || ($(this).text().search(value) > -1) ){
$(dropdown).find('option[value="'+optionValue+'"]').show();
}
The only place I can think of, is the $(dropdown).find('option[value="'+optionValue+'"]').show(); , instead of finding it, to use an index, but I don't know how.
Also, I use the find() twice (in a code not shown), will a variable making faster?
Thank you
You can both simplify and speed this up by using filter:
var value = $(element).val();
$(dropdown).filter(function() {
if ($(this).text().indexOf(value) != -1) {
$(this).show();
}
});

jquery ignoring upper&lowercase in function

hello world i have an problem i am currently making experimental search boxes with divs for my homepage ..
now ive tried to ignore the upperand lowercase but nothing will going successfull so i will ask how i can get ignore the upper and lower case in my code:
$(window).load(function(){
function hide_divs(search) {
if(search === "") {
$("#sboxs > div").show();
} else {
$("#sboxs > div").hide(); // hide all divs
$('#sboxs > div[id*="'+search+'"]').show(); // show the ones that match
}
}
$(document).ready(function() {
$("#search_field").keyup(function() {
var search = $.trim(this.value);
hide_divs(search);
});
});
});
html:
<div id="jOhAnNeS">heres the content of(Johannes)</div>
<div id="michael">heres the content of(Michael)</div>
<div id="TOM">heres the content(Tom)</div>
<div id="JERry">heres the content(Jerry)</div>
<div id="kIM">heres the content(Kim)</div>
<div id="joschUA">heres the content(Joschua)</div>
<div id="katY">heres the content(Katy)</div>
</div>
try this function instead
function hide_divs(search) {
var divs = $("#sboxs > div");
var match = search.toLowerCase();
divs.each( function(i,elem) {
if ( elem.id.toLowerCase().indexOf(match) > -1 )
$(elem).show();
else
$(elem).hide();
});
}

Categories

Resources