Django 的预输入自动完成答案

【问题标题】：typeahead autocomplete for DjangoDjango 的预输入自动完成
【发布时间】：2013-06-05 17:03:28
【问题描述】：

base.html

<html lang=en>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="/media/js/autocomplete.css">
    <script type="text/javascript" src="/media/js/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="/media/js/dimensions.js"></script>
    <script type="text/javascript" src="/media/js/autocomplete.js"></script>
    {% block extra_css %}{% endblock extra_css %}
    <title>{% block title %}books are social{% endblock title %}</title>
  </head>
  <body>
    {% block body %}
    {% endblock body %}
  </body>
</html>

和较小的模板：

<script type="text/javascript" >
$(function(){
  setAutoComplete("bookSearchField", "bookResults", "/lookup/?query=");
});
</script>
<label for="bookSearchField">Book: </label>
<input type="text" id="bookSearchField" name="bookSearchField">

urls.py

from django.conf.urls.defaults import *
urlpatterns = patterns('project.app.views',
    (r'^/lookup/$', 'book_lookup'),
)

models.py

class Book(models.Model):
    name = models.CharField(max_length=200)

views.py

from django.utils import simplejson
from django.http import HttpResponse
from project.app.models import Book
def book_lookup(request):
    # Default return list
    results = []
    if request.method == "GET":
        if request.GET.has_key(u'query'):
            value = request.GET[u'query']
            # Ignore queries shorter than length 3
            if len(value) > 2:
                model_results = Book.objects.filter(name__icontains=value)
                results = [ {x.id :x.name,} for x in model_results ]
    json = simplejson.dumps(results)
    return HttpResponse(json, mimetype='application/json')

那么有没有任何教程/解决方案可以为 elagent 和响应式创建引导输入。

<input id="book_lookup" class="search-query typeahead" data-items="4" type="text"

                        placeholder="Select here....">

已编辑：

    <script type="text/javascript">
    var typeahead_data = [];
        function get_client_names() {
            $.ajax({
                url: "/lookup/?query=",
                success: function (data) {
                    $.each(data, function (key, value) {
                        typeahead_data.push(value.toString());
                    });
                    // assign the array to my typeahead tag
                    $('.typeahead').typeahead({
                        source: typeahead_data,
                    });
                }
            });
        }
    $(function () {
        get_client_names();
    });
</script>

需要类似的东西

 $("#book_lookup").tokenInput([{"id": 1, "name": "ddddd"},{"id": 2, "name": "ddffddd"}],{preventDuplicates: true,
            hintText: "Type book name here...",
            validateInputAjax: true,
            validateInputObjectType: "book name",
            validateInputNewObjectLink: function (value) {
                                          $('#book_lookup').tokenInput(
                                    'add', {'id': value, 'name': value});
                                          return true;
                                        },
            validateInput: function (value) {
                 $.post("/lookup/", {validate_field_name: value},
                        function(data){
                         if (data.valid) {
                          $("#book_lookup").tokenInput('valid', value);
                         } else {
                          $("#book_lookup").tokenInput('invalid', value, 'is not a valid Book name');
                         };
                 });
          }});
          });

如何将数据源更改为 book_lookup json 视图？

【问题讨论】：

试试data-source='/lookup/'
/lookup/?query= 有一个名为 'query' 的键。所以？ :)

标签： django django-views bootstrap-typeahead

【解决方案1】：

我之前使用过 Bootstrap 的 typeahead，我所做的是创建一个通过 Ajax 获取字典的方法，如下所示：

<script type="text/javascript">
    var typeahead_data = [];
        function get_client_names() {
            $.ajax({
                url: "/lookup",
                success: function (data) {
                    $.each(data, function (key, value) {
                        typeahead_data.push(value.toString());
                    });
                    // assign the array to my typeahead tag
                    $('.typeahead').typeahead({
                        source: typeahead_data,
                    });
                }
            });
        }
    $(function () {
        get_client_names();
    });
</script>

标签元素是这样的：

<input id="book_lookup" class="search-query typeahead" data-items="4" type="text"
                        placeholder="Select here....">

基本上你的其余代码都没问题。

请注意，这里您正在向 /lookup/ 视图发出 ajax 请求（this requeires jquery），该视图又返回一个 json 对象，应如下所示：[name1,name2,name3...]。您可以通过像这样通过资源管理器访问视图来测试视图是否正常工作： /lookup/ 如果您看到字典在那里正确显示，则服务器端正常。

希望这对你有用！

【讨论】：

嗨@Paulo Bu。但我也需要获取名称的 id。那么只有我可以处理表格。 :) 。 if request is_ajax(): # 需要吗？而不是 if request.method == "GET":
好的，我的回答并没有直接回答问题，我只是想说明如何使用带有 ajax 的引导程序。如果您还需要获取 Id，您将获得 Javascript 字典而不是数组，因此您必须以这种方式对待它。 is_ajax() 不需要，$.ajax 默认使用方法GET 发出请求。

【解决方案2】：

在 Paulo 的回答中，他只有一个要搜索的静态项目列表，这就是他在加载时调用 ajax 并获取列表并将其添加到源的原因。

我认为，在您的情况下，您需要查询用户输入的任何内容，并将其发送到服务器。这可以通过在 data-source 中添加函数 param 来完成，该函数有 2 个参数，查询和回调。

Check here

【讨论】：