Django新手求助：如何为问答网站实现轻量搜索标题联想（替代Haystack）？

Hey there! Since you're new to Django and just need a simple autocomplete/recommendation system based on the Question model's title field, Haystack is definitely overkill. Here are a few straightforward approaches you can try, tailored to different needs:

1. Django ORM + Vanilla JavaScript (No External Dependencies) #

This is the most lightweight option—no extra libraries needed, just using Django's built-in tools and plain JavaScript. Perfect if you want full control over every part of the process.

Backend Setup #

First, add a view in your app to handle search requests:

from django.http import JsonResponse
from .models import Question
from django.views.decorators.http import require_GET

@require_GET
def search_questions(request):
    query = request.GET.get('q', '')
    if query:
        # Filter questions by title (case-insensitive) and limit results to 10
        questions = Question.objects.filter(title__icontains=query).values('id', 'title')[:10]
        return JsonResponse(list(questions), safe=False)
    return JsonResponse([], safe=False)

Then map this view to a URL in your app's urls.py:

from django.urls import path
from .views import search_questions

urlpatterns = [
    # Your other URLs...
    path('search-questions/', search_questions, name='search_questions'),
]

Frontend Setup #

Add the search input and result display to your homepage template, plus some JS to handle real-time input:

<div class="search-box">
    <input type="text" id="search-input" placeholder="Search for questions...">
    <div id="search-results" class="results-list"></div>
</div>

<script>
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('search-results');

// Add a debounce to avoid spamming the server with every keystroke
searchInput.addEventListener('input', debounce(function() {
    const query = this.value.trim();
    if (!query) {
        resultsContainer.innerHTML = '';
        return;
    }

    // Fetch results from the backend
    fetch(`{% url 'search_questions' %}?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            resultsContainer.innerHTML = '';
            data.forEach(question => {
                const resultLink = document.createElement('a');
                resultLink.href = `/questions/${question.id}/`; // Replace with your question detail URL
                resultLink.textContent = question.title;
                resultLink.classList.add('result-item');
                resultsContainer.appendChild(resultLink);
            });
        });
}, 300));

// Simple debounce function to delay requests
function debounce(func, delay) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
}
</script>

Pro tip: Add some CSS to style the results list—make it look clean and easy to read!

2. Use django-autocomplete-light (Lightweight Third-Party Library) #

If you don't want to write all the JS from scratch, this library is built specifically for autocomplete in Django and way simpler than Haystack. It even comes with nice pre-built UI components like Select2.

Installation & Setup #

First install the package:

pip install django-autocomplete-light

Add it to your INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    # Your other apps...
    'dal',
    'dal_select2', # Optional, for the clean Select2 style
]

Create an Autocomplete View #

from dal import autocomplete
from .models import Question

class QuestionAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # Remove this check if you want unauthenticated users to access the search
        if not self.request.user.is_authenticated:
            return Question.objects.none()

        queryset = Question.objects.all()
        if self.q:
            queryset = queryset.filter(title__icontains=self.q)
        return queryset

Add the URL #

from django.urls import path
from .views import QuestionAutocomplete

urlpatterns = [
    # Your other URLs...
    path('question-autocomplete/', QuestionAutocomplete.as_view(), name='question_autocomplete'),
]

Use in Template #

{% load static %}
{% load dal_tags %}

<link rel="stylesheet" href="{% static 'select2/dist/css/select2.min.css' %}">
<script src="{% static 'select2/dist/js/select2.min.js' %}"></script>

<div class="search-container">
    <input type="text" id="question-search" data-autocomplete-url="{% url 'question_autocomplete' %}">
</div>

<script>
$('#question-search').select2({
    ajax: {
        url: $(this).data('autocomplete-url'),
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return { q: params.term };
        },
        processResults: function(data) {
            return { results: data.results };
        },
        cache: true
    },
    minimumInputLength: 1,
    placeholder: 'Search for questions...',
});
</script>

This gives you a polished, ready-to-use autocomplete with minimal code.

3. Frontend-Only Filtering (For Small Datasets) #

If your site only has a few hundred questions (or less), you can skip backend requests entirely by loading all question titles upfront and filtering them locally. Great for speed with small data.

Template & Backend Setup #

In your homepage view, pass all question data as JSON:

from django.shortcuts import render
from django.core import serializers
from .models import Question

def home(request):
    questions = Question.objects.all().values('id', 'title')
    questions_json = serializers.serialize('json', questions)
    return render(request, 'home.html', {'questions_json': questions_json})

Then add the frontend code to filter locally:

<div class="search-box">
    <input type="text" id="search-input" placeholder="Search for questions...">
    <div id="search-results"></div>
</div>

<script>
// Load all questions from the backend-provided JSON
const allQuestions = {% autoescape off %}{{ questions_json }}{% endautoescape %};
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('search-results');

searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase().trim();
    resultsContainer.innerHTML = '';
    if (!query) return;

    // Filter questions locally
    const filteredQuestions = allQuestions
        .filter(q => q.fields.title.toLowerCase().includes(query))
        .slice(0, 10);

    filteredQuestions.forEach(question => {
        const resultLink = document.createElement('a');
        resultLink.href = `/questions/${question.pk}/`;
        resultLink.textContent = question.fields.title;
        resultsContainer.appendChild(resultLink);
    });
});
</script>

Just note: This isn't ideal for large datasets—it'll slow down page load times if you have thousands of questions.

内容的提问来源于stack exchange，提问作者NDZIE Patrick Joel