Python Django 自动完成搜索与 Select2 示例

这篇文章将为您提供 django select2 自动完成示例的示例。这个例子将帮助你 django select2 自动完成。如果您对 django select2 自动完成示例有疑问,那么我将给出简单的示例和解决方案。我们将在 python 中查看 django select2 自动完成示例的示例。

在这里,我会给你我们将帮助你给出 django select2 自动完成示例的示例。所以让我们看看下面的例子:

第 1 步:创建项目

在这一步中,我们将使用 django-admin 创建一个新的 django 项目。返回命令行界面并运行以下命令:

django-admin startproject autocomplete

第 2 步:创建应用程序

python3 manage.py startapp select2

接下来需要在settings.py文件中添加如下:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'select2',
]

第 3 步:数据库设置

下一步,我们将修改 settings.py 文件并更新数据库设置以配置 mydb 数据库:

settings.py

DATABASES = {  
    'default': {  
        'ENGINE': 'django.db.backends.mysql',  
        'NAME': 'autocomplete',  
        'USER':'root',  
        'PASSWORD':'root',  
        'HOST':'localhost',  
        'PORT':'3306'  
    }  
}  

第 4 步:创建模型

在这一步中,我们将需要用于存储联系人的数据库模型。打开 select2/models.py 文件并添加以下代码:

select2/models.py

from django.db import models

# Create your models here.

class Language(models.Model):
    name = models.CharField(max_length=255)
    created_at = models.DateTimeField( auto_now_add = True)

创建这些模型后,您需要使用以下命令创建迁移:
第 5 步:创建迁移

python manage.py makemigrations

成功运行上述命令后,进入 select2/migrations/0001_initial.py
select2/migrations/0001_initial.py

# Generated by Django 4.0.5 on 2022-06-21 12:31

from django.db import migrations, models


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    operations = [
        migrations.CreateModel(
            name='Language',
            fields=[
                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('name', models.CharField(max_length=255)),
                ('created_at', models.DateTimeField(auto_now_add=True)),
            ],
        ),
    ]

接下来,您需要使用以下命令迁移数据库:

python manage.py migrate

第 6 步:创建视图

在这一步中,我们需要创建视图来执行获取记录到数据库。打开 select2/views.py 文件并添加:

select2/views.py

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Language

# Create your views here.

# Select2
def home(request):
    languages = Language.objects.all()
    context = {
        'languages': languages,
    }
    return render(request, 'home.html', context)

第 7 步:创建 Django 模板

接下来,打开 select2/templates/home.html 文件并添加:
/select2/templates/home.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Django select2 Example Tutorial</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
    <div class="container mt-5 pt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-7">
                <div class="card">
                    <div class="card-header">
                        <h5>Django Select2 Autocomplete Search Example - <span class="text-primary">Tuts-Station.com</span></h5>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="sel1">Select Language:</label>
                                <select class="form-control select-lan" id="name">
                                    <option selected disabled>Choose Language</option>
                                    {% for language in languages %}
                                        <option>{{ language.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
$(document).ready(function() {
    $('.select-lan').select2();
});
</script>
</html>

第 8 步:创建网址

在本节中,我们将创建 url 来访问我们的视图。转到 urls.py select2/urls.py 文件并按如下方式更新它:
select2/urls.py

from django.urls import path
from core import views

urlpatterns = [
    path('', views.home, name='home'),
]

接下来,我们将要求修改您的根 preoject 文件夹的 urls.py 以更新文件。
autocomplete/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('select2.urls')),
]

第 9 步:运行服务器

在这一步中,我们将运行本地开发服务器来玩我们的应用程序,而无需将其部署到网络上。

python manage.py runserver

接下来,使用 Web 浏览器访问 http://localhost:8000/ 地址。

希望对您有用….

django-autocomplete-search-with-select2-example

发表评论

邮箱地址不会被公开。 必填项已用*标注