Django、jQuery和自动完成_Jquery_Python_Django_Autocomplete

Django、jQuery和自动完成

jquery python django autocomplete

Django、jQuery和自动完成,jquery,python,django,autocomplete,Jquery,Python,Django,Autocomplete,经过一些广泛的研究（谷歌搜索），我找不到关于如何使用Django和jQuery设置自动完成的最新教程。似乎有各种各样的插件，关于使用哪种插件或何时使用插件似乎没有一致性或标准我不是Django或jQuery的专业人士，但我需要一个记录良好且易于使用的自动完成解决方案建议？我非常喜欢django autocomplete:。它有一个很好的即插即用功能，可以很容易地与您自己的应用程序集成，而无需太多额外的编码。如果您希望从django型号中进行搜索，则类似于： from django.utils

经过一些广泛的研究（谷歌搜索），我找不到关于如何使用Django和jQuery设置自动完成的最新教程。似乎有各种各样的插件，关于使用哪种插件或何时使用插件似乎没有一致性或标准

我不是Django或jQuery的专业人士，但我需要一个记录良好且易于使用的自动完成解决方案

建议？

我非常喜欢django autocomplete:。它有一个很好的即插即用功能，可以很容易地与您自己的应用程序集成，而无需太多额外的编码。

如果您希望从django型号中进行搜索，则类似于：

from django.utils import simplejson
    def autocompleteModel(request):
    search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search'])
    results = []
    for r in search_qs:
        results.append(r.name)
    resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');'
    return HttpResponse(resp, content_type='application/json')

<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

对于jQuery自动完成和调用：

function searchOpen() {
    var search = $('#txtSearch').val()
    var data = {
        search: search
    };
    $.ajax({
        url: '/search.json',
        data: data,
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'searchResult'
    });
}


function searchResult(data) {
    $( "#txtSearch" ).autocomplete ({
        source: data
    });
}

最后，要在您的输入表单上连接所有内容，您需要：

from django.utils import simplejson
    def autocompleteModel(request):
    search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search'])
    results = []
    for r in search_qs:
        results.append(r.name)
    resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');'
    return HttpResponse(resp, content_type='application/json')

<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

注意，除了股票Jquery之外，这还使用了Jquery用户界面。

同时，出现了一个很好的教程

autocomplete

为您做一切，您只需执行以下操作：

$(function() {
  $("#search-field").autocomplete({
    source: "/ajax_calls/myFunction",
    minLength: 2,
  });
});

url.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

视图.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

来源：

django自动完成灯是一个非常好的选择。它很容易使用，而且文档记录也很好。链接：

文档：

有一种不使用Json的方法：

示例：假设您有一个名为College的模型：

class College(models.Model):
    collegeName = models.CharField(max_length=250)
    def __str__(self):
        return self.collegeName

现在，将名为'all_colleges'=College.objects.all（）的上下文呈现到模板：

HTML:

<input type="text" id="college"/>

  $( function() {
    var availableColleges = [
      {% for clg in all_colleges %}
          "{{clg}}",
      {%endfor%}
    ];
    $( "#clg" ).autocomplete({
      source: availableColleges
    });
  } );

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

要包含在模板中的资源：

<input type="text" id="college"/>

  $( function() {
    var availableColleges = [
      {% for clg in all_colleges %}
          "{{clg}}",
      {%endfor%}
    ];
    $( "#clg" ).autocomplete({
      source: availableColleges
    });
  } );

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

如果您遇到任何问题，请发表评论：）

我发现最简单的开始方式（尽管可能不是生产的最佳方式）是使用

最基本的方法只需要将代码复制粘贴到html中，使用数组作为

源

：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Cities example</title>
  <link href="style.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>  
<div class="ui-widget">
  <label for="tags">Cities: </label>
  <input id="tags">
</div>

<script>
    $( function() {
      var availableTags = [
          'Barcelona',
          'Berlin',
          'London',
          'Madrid',
          'Rome',
          'Paris'
      ];
      $( "#tags" ).autocomplete({
        source: availableTags
      });
    } );
</script>

</body>
</html>


jQueryUI自动完成-城市示例
城市：
$（函数（）{
var availableTags=[
“巴塞罗那”，
“柏林”，
“伦敦”，
“马德里”，
“罗马”，
“巴黎”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
} );

假设您希望使用用户的用户名在某些输入字段（如

）上设置自动完成。我就是这样做的：

url.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

首先，添加AJAX调用将使用的url

url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')

视图.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

然后设置一个视图，从数据库中检索信息（在本例中是用户名）

from django.http import JsonResponse

def autocomplete(request):
    if request.is_ajax():
        username_query = request.GET.get('username_query', '')
        usernames = (User.objects
                     .filter(username__startswith=username_query)
                     .values_list('username', flat=True))
        data = {
            'usernames': usernames,
        }
        return JsonResponse(data)

JavaScript

最后，您需要创建一个JavaScript函数，该函数将在每次按下（并释放）键时转到数据库并返回与输入字段值匹配的用户名。为此，我们将使用Ajax、JQuery和jqueryui的自动完成功能

jQuery(function() {
    $("#id_input").on('keyup', function(){
        let value = $(this).val();
        $.ajax({
            url: "{% url 'ajax_autocomplete' %}",
            data: {
              'username_query': value 
            },
            dataType: 'json',
            success: function (data) {
                let usernames = data.usernames;
                $("#id_input").autocomplete({
                source: usernames,
                minLength: 3 
                });       
            }
        });        
    });
  });

就这样！有关更多信息，您可以在django 1.10中查看此

，我使用相同的代码

网址：

视图：

js:

html:

我知道实现jQuery自动完成很棘手。以下是Django>2.0的工作示例：

步骤1：使用输入创建一个简单的HTML（不要忘记添加链接以加载jQuery和jQuery ui）。将代码另存为testsearch.html

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
</head>
<div class="ui-widget">
  <label for="search"> Search </label>
  <input id="search">
</div>

项目是我的模式。您可以将其替换为您的模型。将标题替换为用于搜索的字段

在我的示例中，您可以创建以下简单模型：

class Project(models.Model):
    """
    A Model representing a the project.
    """
    title = models.CharField(max_length=200)

第4步：不要忘记包含两个URL。一个用于HTML，另一个用于Ajax调用

<script type="text/javascript">
$(function() {
  $("#search").autocomplete({
    source: "{% url 'project:ajax_load_project' %}",
    minLength: 2,
  });
});
</script>

urlpatterns += [
    #test search
    path('SuggestProject/', views.ajax_load_project, name='ajax_load_project'),
    path('searchtest/', views.searchProject, name='searchProject'),]

我觉得教程很好。本教程使用静态国家/地区数组，自动完成功能从中选择响应（下拉元素）

现在，为了使相同的功能更加动态，我们可以向Django视图添加简单的jQueryAjax调用

var countries;
$.ajax({
    url : '/autocomplete_view';
    data : {'query':$('#query').val()};
    type : 'GET',
    success : function(response){
        countries = JSON.parse(response);
        // do something extra
    },
    failure : function(response){
        // do something here
    },
    async : false
});

我看着django autocomplete，这似乎是一个不错的选择。但我不太明白如何将它集成到我的表单和模板中。说明没有那么多。请看：simplejson已弃用，在最新的Djangos中不可用：嗨，你能解释一下我可以把

/search.json

文件放在哪里吗？我不明白为什么人们甚至尝试使用django autocomplete。我浪费了大约两个小时试图让它工作。这会更好，并让您对代码有更多的控制。虽然返回了结果，但它们不会显示在输入下的下拉列表中。请看我的问题：我也花了一段时间才让它工作起来，还有一个额外的问题。一旦我弄明白了怎么做，我就试图一步一步地解释，希望对其他人有用。如果你的输入字段——“搜索字段”在表单中，你是怎么做的？@GaneshJadhav-你能找到你的问题的答案吗？我面临着类似的问题。发布了一个查询。很高兴了解您对此的看法。欢迎来到Stack Overflow！虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。请参阅。@Nikhil Shirsath，文档仅显示如何为管理目的启用它。是否有一个示例可以让我在普通应用程序而不是管理程序中看到它？@user763410这里是django autocomplete light教程的链接：