Как вызвать 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