Django实现jquery select2带搜索的下拉框

要实现一个带搜索的下拉框，需要用到Django作为后端框架，同时引入JQuery和Select2插件。下面是详细的步骤：

1. 安装依赖

首先，需要安装以下依赖：

• Django
• JQuery
• Select2

JS和CSS文件可以从官网下载，也可以使用CDN。

2. 定义模型

接下来，需要定义一个模型类，以便在前端显示下拉框列表。例如，若要创建一个学生模型类：

class Student(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()

3. 定义视图和模板

在视图中，需要将模型的数据传递到前端。具体实现可分为以下步骤：

• 查询模型的数据，并将其转换为JSON格式（通过json.dumps()实现）。

def student_list(request):
    students = Student.objects.all()
    students_json = json.dumps([ {'id': s.pk, 'text': s.name} for s in students ])

    return render(request, 'student_list.html', {'students_json': students_json})

• 在模板中，需要引入JQuery、Select2的JS和CSS文件。另外，需要创建一个带有class属性为select2_demo的<select>元素，并在其中嵌套一个<option>元素。在<script></script>标签中，初始化Select2插件，并指定Ajax的URL和数据格式。

{% block content %}
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

    <h1>Student List</h1>

    <select class="select2_demo" style="width: 500px;">
      <option value="1">Loading data...</option>
    </select>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.select2_demo').select2({
                placeholder: 'Select a student',
                ajax: {
                    url: '/search_students/',
                    dataType: 'json',
                    data: function (params) {
                        return {
                            query: params.term,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name,
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
        });
    </script>
{% endblock %}

在模板中，可以通过{{ students_json }}来获取后端返回的数据。

4. 定义URL路由

在urls.py中，需要定义一个路由，将/search_students/与视图student_list相对应。

url(r'^search_students/$', views.student_list, name='search_students'),

至此，一个带有搜索的下拉框就实现了。下面是2个示例：

示例1：基于数据库查询

这个示例假设有一个用户模型类，用户可以根据姓名、邮箱或ID进行搜索。可以使用Q对象来连接搜索条件。例如：

def search_users(request):
    query = request.GET.get('query', '')
    users = User.objects.filter(Q(username__icontains=query) | Q(email__icontains=query) | Q(id__icontains=query))
    users_json = json.dumps([ {'id': u.pk, 'text': u.username} for u in users ])

    return HttpResponse(users_json, content_type='application/json')

在Q对象中，icontains表示不区分大小写，并使用“%”通配符来匹配任意字符。

示例2：基于API查询

这个示例假设有一个API可以接受任意关键字进行搜索。可以使用Python的requests库来发送HTTP请求，然后解析返回的JSON数据。例如：

def search_books(request):
    query = request.GET.get('query', '')
    url = 'https://api.douban.com/v2/book/search?q={}'.format(query)
    response = requests.get(url)
    books = response.json()['books']
    books_json = json.dumps([ {'id': b['id'], 'text': b['title']} for b in books ])

    return HttpResponse(books_json, content_type='application/json')

在requests.get()中，url参数表示要请求的API的URL。调用response.json()方法将返回的JSON数据转换为Python对象，然后使用列表推导式将列表转换为JSON格式。