javascript – 快速键入时KeyUp函数不起作用

我正在 HTML页面上实现 javascript搜索.我的代码是这样的

$(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>

在普通情况下它运行良好,但是当用户类型太快时,keyUp事件未正确触发.谁能指出我在这里做错了什么？

解决方法

使用keypress事件而不是keyup,在释放第一个键之前,您将无法获得键启动事件.这可能会导致问题,因为快速键入时可能会有多个键可能无法释放.

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