Django 可搜索下拉框|极客教程

Django 可搜索下拉框

在Web开发中，搜索下拉框是一个常见的功能，用户可以通过输入关键字来搜索相关内容，从而提高用户体验和检索效率。在Django框架中，实现可搜索的下拉框是一个常见的需求，本文将详细介绍如何在Django项目中实现可搜索下拉框功能。

1. 创建Django项目

首先，我们需要创建一个Django项目。如果还没有安装Django，可以通过以下命令进行安装：

pip install django

然后，使用以下命令创建一个Django项目：

django-admin startproject search_dropdown

进入项目目录：

cd search_dropdown

2. 创建Django应用

在Django项目中，一个应用通常用于实现特定的功能模块。我们可以通过以下命令创建一个Django应用：

python manage.py startapp products

然后，将该应用添加到项目的配置中：

# settings.py

INSTALLED_APPS = [
    ...
    'products',
]

3. 创建模型

在products应用中，我们需要定义一个模型来存储产品信息。在models.py中定义一个简单的Product模型：

# models.py

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()

    def __str__(self):
        return self.name

然后，运行以下命令来迁移数据库：

python manage.py makemigrations
python manage.py migrate

4. 创建视图

接下来，我们需要创建一个视图来处理搜索功能。在products应用中的views.py中定义如下视图函数：

# views.py

from django.http import JsonResponse
from .models import Product

def search_products(request):
    query = request.GET.get('query')

    if query:
        products = Product.objects.filter(name__icontains=query)
    else:
        products = Product.objects.all()

    data = [{'id': product.id, 'name': product.name} for product in products]
    return JsonResponse(data, safe=False)

5. 创建URL模式

为了使视图可以正常访问，我们需要定义URL模式。在products应用中的urls.py中定义如下URL模式：

# urls.py

from django.urls import path
from .views import search_products

urlpatterns = [
    path('search/', search_products, name='search_products'),
]

然后，在项目的urls.py中包含该应用的URL模式：

# urls.py

from django.urls import path, include

urlpatterns = [
    path('products/', include('products.urls')),
]

6. 创建前端页面

最后，我们需要创建一个前端页面来展示可搜索的下拉框。在search_dropdown项目目录下创建一个templates文件夹，并在其中创建一个index.html文件：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Search Dropdown</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="searchInput" list="products">
    <datalist id="products"></datalist>

    <script>
         $('#searchInput').on('input', function() { var query =$ (this).val();
             $. ajax ({ url: '/products/search/?query=' + query, success: function(data) {$ ('#products').empty();
                    data.forEach(function(product) {
                         $('#products').append(`<option value="$ {product.name}" data-id="${product.id}">`);
                    });
                }
            });
        });
    </script>
</body>
</html>