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

Posted 2023-05-08

【中文标题】如何在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 不一样，你可以再查一下

【参考方案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 变量