Как вызвать on('keyup') внутри ajax success

Я пытаюсь сделать живой поиск на основе возвращаемых json данных через ajax вызов, вот что я пробовал, но к сожалению это не работает

function returnVistors(){
    
    k = '';    
    $.ajax({
        type:'GET',
        url:'/vistors/list',
        success:function(data){
            const searchInput = document.getElementById('search_visitors').val();
            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 !? Спасибо, что сообщили мне

Вы должны делать вызов ajax внутри обработчика события keyup, а не наоборот, это приводит к путанице.

Вы можете обратиться к этому коду ниже и посмотреть, как это можно сделать.

$('#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   
                }

            },
        })
    }
    
});

Кроме того, вы ссылаетесь на переменную visitors внутри вашего обратного вызова функции success, когда называете входящие данные как data

Вернуться на верх