时间戳

首页 > 解决方案 > 在使用 jQuery 在 django 中制作自动完成搜索功能时，我犯了哪些错误？

jquery - 在使用 jQuery 在 django 中制作自动完成搜索功能时，我犯了哪些错误？

问题描述

模型.py

class Banks(models.Model):
name = models.CharField(max_length=49, blank=True, null=True)
id = models.BigIntegerField(primary_key=True)

class Meta:
    managed = False
    db_table = 'banks'


class Branches(models.Model):
    ifsc = models.CharField(primary_key=True, max_length=11)
    bank = models.ForeignKey(Banks, models.DO_NOTHING, blank=True, null=True)
    branch = models.CharField(max_length=250, blank=True, null=True)
    address = models.CharField(max_length=250, blank=True, null=True)
    city = models.CharField(max_length=50, blank=True, null=True)
    district = models.CharField(max_length=50, blank=True, null=True)
    state = models.CharField(max_length=26, blank=True, null=True)

class Meta:
    managed = False
    db_table = 'branches'

def __str__(self):  
    return self.ifsc

views.py 我的自动完成视图功能

def search_ifsc(request):
    ifsc = request.GET.get('ifsc')
    payload = []
    if ifsc:
        bank_objs = Branches.objects.filter(ifsc__icontains=ifsc)
        
        for bank_obj in bank_objs:
            payload.append(bank_obj.ifsc)

    return JsonResponse({'status' : 200 , 'data' : payload})

我尝试过的：这是我的 jquery 代码 jQuery 自动完成功能：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css" />
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

    <div class="container mt-5 pt-5 col-md-5">

        <div id="autocomplete" class="autocomplete">
            <input class="autocomplete-input" />
            <ul class="autocomplete-result-list"></ul>
        </div>

    </div>


    <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>





    <script>
        new Autocomplete('#autocomplete', {

            search: input => {
                console.log(input)
                const url = `/search/?search=${(input)}`
                return new Promise(resolve => {
                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            resolve(data.data)
                        })
                })
            },


            renderResult: (result, props) => {
                console.log(props)
        
                let group = ''
                if (result.index % 3 === 0) {
                    group = `<li class="group">Group</li>`
                }
                return `
      ${group}
      <li ${props}>
        <div class="wiki-title">
          ${result}
        </div>
        
      </li>
    `
            },

            getResultValue: result => result,
            onSubmit: result => {
                window.open(`http://127.0.0.1:8000/api/bankdetailapi/search/?=${(result)}`)
            }
        })
    </script>

<!-- <div style="text-align: center; 1px solid red;
            border-middle: 1px solid red; font-size: 1.5em;">
    <a href="http://127.0.0.1:8000/api/">
        API
</div> -->
</body>

我为它制作了搜索视图，效果很好。唯一的问题是自动完成根本不起作用。我的猜测是端点连接不正确。任何帮助将不胜感激

标签： jqueryjquery-ui-autocompletedjango-3.0

解决方案

推荐阅读