如何在ajax成功中调用(‘keyup’)

Question

我试图通过ajax调用基于返回的json数据进行实时搜索，这是我尝试过的，但不幸的是它不起作用

​

function returnVistors(){
    
    k = '';    
    $.ajax({
        type:'GET',
        url:'/vistors/list',
        success:function(data){
            const visitors = data.visitors
            const searchInput = document.getElementById('search_visitors').value;
            if(searchInput.length > 0){
                $('#search_visitors').on('keyup',function(){
                for(i = 0;i < visitors.length; i++){
                    const full_name = visitors[i]['full_name'].toLowerCase();
                    if(full_name.incudes(searchInput)){
                        k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
                    }
                    
                    k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
                }
            });
            }
            else{
    
          for(i = 0;i < visitors.length; i++){
            const id = visitors[i]['id']
            const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/,parseInt(id));
            k+='<a href="'+detail_url+'" class="flex  hover:bg-purple-900 hover:text-white  items-center border rounded-xl mt-1 p-2"></a>';
            k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
          }
            
          document.getElementById('visitors_results').innerHTML = k   
        }

    
        },

      });
      
}

        <div class="mt-10 p-2 header rounded-xl md:rounded-tr-none md:rounded-tl-none rounded-bl-xl rounded-br-xl w-full  md:w-2/12 h-96 md:h-screen">
            <div class="p-3 bg-white rounded-xl">
                <button class="text-lg focus:outline-none"><i class="bi bi-search"></i></button>
                <input type="text" class="w-11/12 focus:outline-none" name="search_visitors" id="search_visitors" placeholder="search here">
            </div>

            <div id="visitors_results" class="p-3 bg-white rounded-xl mt-4 md:mt-5 p-2 overflow-y-scroll" style="height: 90%;">
                <div class=" flex justify-center items-center" id="spinner">
                    <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-gray-900"></div>
                  </div> 
            </div>
            
        </div>

​

有没有可能在ajax success！中创建一个新函数？谢谢你让我知道

Answer 1

您应该在keyup事件处理程序中进行ajax调用，而不是相反，这只会造成混乱。

你可以参考下面的代码，看看如何做到这一点。

$('#search_visitors').on('keyup',function(){
    
    const searchInput = document.getElementById('search_visitors').val();

    if(searchInput.length > 0){
        $.ajax({
            type:'GET',
            url:'/vistors/list',
            success:function(visitors){

                if(visitors.length>0){
                    for(i = 0;i < visitors.length; i++){
                        const full_name = visitors[i]['full_name'].toLowerCase();
                        if(full_name.incudes(searchInput)){
                            k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
                        }
                        
                        k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
                    }
                }    
                else
                {
                    for(i = 0;i < visitors.length; i++){
                        const id = visitors[i]['id']
                        const detail_url = '{% url "vistors:vistor_obj" id=1111 %}'.replace(/1111/,parseInt(id));
                        k+='<a href="'+detail_url+'" class="flex  hover:bg-purple-900 hover:text-white  items-center border rounded-xl mt-1 p-2"></a>';
                        k+='<p class="mr-2">'+visitors[i]['full_name'] + ' - '+ visitors[i]['city']+'</p>'
                    }
                
                    document.getElementById('visitors_results').innerHTML = k   
                }

            },
        })
    }
    
});

此外，当您将传入数据命名为data时，还会在成功函数回调中引用visitors变量