Question

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')

所以有任何教程/解决方案可以创建bootstrap typeahead，用于精简和响应。

<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视图？

Answer 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请求（这会重新发送jquery ），而[name1,name2,name3...]视图又返回一个json对象，它应如下所示：{{1 }}。您只需通过浏览器访问视图就可以测试视图是否正常工作：/ lookup /如果您看到字典正确显示，那么服务器端就可以了。

希望这适合你！

Answer 2

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

在您的情况下，我认为，您需要查询用户类型，并将其发送到服务器。这可以通过在data-source中添加函数param来完成，它包含2个参数，查询和回调。

Check here

Django的typeahead自动完成

2 个答案: