KeyUp function does not work with speed dialing

Question

I am using javascript search on an HTML page. My code is like this

    $(function () {
        function doSearch(obj, txt) {

         
            var name = $(obj).text();

            if (name != "undefined" && name != null)
            {
                var i = name.toLowerCase().indexOf(txt.toLowerCase());

                if (i >= 0) {
                    var str = name.substr(0, i) + '<b class="selected">' + name.substr(i, txt.length) + '</b>' + name.substr(i + txt.length, name.length)
                    obj.innerHTML = str;
                } else {
                    obj.innerHTML = name;
                }
                return i >= 0;
            }
           
        }
		

        $("#txtesearch").keyup(function () {
            $(".charity-listing").show().find("li").show();
			
            var txt = $("#txtesearch").val().toLowerCase();

            var CharityNames = $(".charity-listing strong").filter(function (idx) {               
                return doSearch(this, txt);
            });
			
            $('.charity-listing li').not(CharityNames.parents("li")).hide();
        
            CharityNames.parents("li").fadeIn();

            var CharityText = $(".charity-listing p").filter(function (idx) {
                return doSearch(this, txt);
            });

            $('.charity-listing li').not(CharityText.parents("li")).hide();

            CharityText.parents("li").fadeIn();

            $(".charity-listing").each(function () {
                if ($(this).find("li").length == $(this).find("li:hidden").length) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            }); 
			
            $("#txtesearch").each(function () {          
                if ($("#txtesearch").val() == "") {
                    $(".charity-listing").show();
                
                }
            });
            if ($(".charity-listing").find("li:visible").length == 0 && $(".innerbox label.msg").length == 0) {
                $(".pagination-main").append("<label class=\"msg\">There is no search result available to show</label>");				
            }
           
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-left " data-os-animation="fadeInUp" data-os-animation-delay="0s">
                                        
<p class="heading main text-center c5-text">sdf</p>                                                                                      
                                            <input type="text" id="txtesearch">
                                        </div>
<div class="container charity-listing">
            <ul style="list-style:none;">
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
                       
                   
					<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="/media/1071/17.png">
                    <strong title="Charity test">Charity test</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>

                    

                     <div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec00">
                            +
                     </div>
                    </li>
<li class="col-md-3 even" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
                       
                   
					<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="/media/1071/17.png">
                    <strong title="CharityTesttwo">CharityTesttwo</strong>
                    <p>veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi</p>

                    

                     <div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec01">
                            +
                     </div>
                    </li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
                       
                   
					<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="/media/1071/17.png">
                    <strong title="Charitynew">Charitynew</strong>
                    <p>s autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

                    

                     <div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec02">
                            +
                     </div>
                    </li>
<li class="col-md-3 even" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
                       
                   
					<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="/media/1071/17.png">
                    <strong title="CharitynewTest">CharitynewTest</strong>
                    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Qu</p>

                    

                     <div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec03">
                            +
                     </div>
                    </li>
             
                </ul>
            

            </div>

Run code

In the normal case, this works well, but when the user enters a keyUp event that is too fast, it does not fire properly. Can someone point out what I'm doing wrong here?

Answer 1

Use keypressEvents instead keyup, you will not receive a key up event until the first key is issued. This can cause problems, because with a quick entry there may be several keys that may not be available.

$('#txtesearch').keypress(function(e){
  console.log(e.which);
});