Yasir Pasha February 2016

jQuery- After append element in div hide/show not working

I have a problem to hide/show the element after append.

jQuery Code

var selector_conversation = $('#search-conversation');
    var search_in             = $('.conversation');
    selector_conversation.unbind('keyup').bind('keyup', function(){
        var val = $(this).val();
        search_in.hide();
        var i = 0;
        $('.not-found').remove();
        search_in.each(function(index, element){
            var text = $(element).find('p.usr-msg-title').text();
            if(text.toLowerCase().indexOf(val) >= 0){
                $(this).show();
                i ++;
            }else{
                //console.log('no')
            }
        });

        if(i == 0){
            $('<div class="user-msgs-box not-found" style="text-align: center">' + '<h3 >Not Found</h3>' + '<p>No people or conversations named ' + val + '</p>' + '</div>').insertAfter('#search-form');
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form" action="" method="">
            <input type="text" autocomplete="on" id="search-conversation" class="search" name="" size="20" maxlength="100" alt="" placeholder="Search Topics">
            <a class="sIcon" title="search" href="javascript:void(0);"></a>
        </form>

<div class="conv-box" style="max-height: 783px;">
<div class="cursor_pointer usr-msg-item conversation active"
     data-url="http://localhost/kinnect2/messages/Kinnect-Two-2/9" id="conv-9">
    <div class="usr-msg-block">
        <div class="usr-msg-img">
            <a href="javascript:void(0)">
                <img        

Answers


Rejith R Krishnan February 2016

Move the search_in variable definition in to the function.

selector_conversation.unbind('keyup').bind('keyup', function(){
    var search_in = $('.conversation');
    //your code
});    

Post Status

Asked in February 2016
Viewed 3,035 times
Voted 4
Answered 1 times

Search




Leave an answer