Show items while typing in the search engine in django with ajax

4

In link this is a search engine that shows some results while typing in it. But now what I want is that it does not show those results if I do not change the list of spells while I'm typing there. Something like what google does, I think it is showing me different results as I write.

the search engine code with ajax

                                       

    <!-- RESULTADO CON AJAX -->
    <script>
        $('#busqueda').keyup(function(e){
            $("#resultados").text("");
            consulta = $("#busqueda").val();
             $.ajax({
             data: {'name': consulta},
             url: '{% url 'Spell:spell_search' %}',
             type: 'get',
             success : function(data) {    
                    $("#resultados").text("");                  
                    for (i=0;i<data.length;i++){

                        if((i % 2)==0)
                            $("#resultados").append("<a class=\"Search-resultados--item \" href=/"+data[i].slug+">"+data[i].name+"</a>");
                        else
                            $("#resultados").append("<a class=\"Search-resultados--item Search-resultados--info\" href=/"+data[i].slug+">"+data[i].name+"</a>");
                    }
                    if(consulta == ""){$("#resultados").text("");}
             },
             error : function(message) {
                     $("#resultados").text("");
                  }
             });
        });
    </script>
</section>

views.py

class SpellListView(ListView):
    model = Spell
    template_name = 'spells/spell_list.html'
    context_object_name = 'spells'
    paginate_by = 5

    def get_context_data(self, **kwargs):
        context = super(SpellListView, self).get_context_data(**kwargs)
        context['categories'] = Group.objects.all()
        return context


class SpellSearchView(View):
    model = Spell

    def get(self, request, *args, **kwargs):
        if self.request.is_ajax():
            spells = self.model.objects.filter(name__icontains = request.GET['name']).values('id', 'name', 'slug')[:10]
            return JsonResponse(list(spells), safe=False)
        return JsonResponse("Solo se permiten consultas mediante AJAX", safe=False)

class SpellDetailView(DetailView):
    model = Spell
    template_name = 'spells/spell_detail.html'
    slug_field = 'slug'
    context_object_name = 'spell'

    def get_context_data(self, **kwargs):
        context = super(SpellDetailView, self).get_context_data(**kwargs)
        context['categories'] = Group.objects.all()
        return context

class SpellCategoryListView(SpellListView):

    def get_queryset(self):
        group = get_object_or_404(Group, id = self.args[0])
        ranges = Range.objects.filter(group = group)
        queryset = self.model.objects.filter(range__in = ranges)
        return queryset

class SpellEditView(UpdateView):
    model = Spell
    fields = ['name', 'description', 'range', 'type', 'method', 'object',]
    template_name_suffix = '_update'
    success_url = '../'

    @method_decorator(login_required)
    def dispatch(self, *args, **kwargs):
        return super(SpellEditView, self).dispatch(*args, **kwargs)

I think one way would be to create a view and place the results there by filtering them by what the search engine contains, but I'm not sure.

If you can help me with that, I would appreciate it. If you need some extra code, say it: P

    
asked by ikenshu 23.09.2016 в 14:58
source

1 answer

1

What you must do is every time the person writes a call to an endpoint that returns a json with the information of the sorcerers, then with jquery to clean the div where you keep the information and generate the new information of the sorcerers.

    
answered by 19.10.2016 в 01:59