如何在ajax成功中调用（'keyup'）答案

【问题标题】：how to call on('keyup') inside ajax success如何在ajax成功中调用（'keyup'）
【发布时间】：2021-10-21 22:35:12
【问题描述】：

我正在尝试基于通过 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 中创建一个新函数！？谢谢你告诉我

【问题讨论】：

这段代码有很多问题！像 val() 不是 getElementById 的成员，并且未定义访问者变量等。
@CyC0der 解决了问题，抱歉
但还是不行
还是有问题，returnVistor() 从来没有调用过任何地方
@freedomn-m 不一样，你可以再查一下

标签： javascript jquery json django ajax

【解决方案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 变量

【讨论】：