3

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)

ビュー.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 と Respond のブートストラップ 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');
                         };
                 });
          }});
          });

data-source を book_lookup json ビューに変更するには?

4

2 に答える 2

1

パウロの答えでは、彼は検索するアイテムの静的リストを持っているだけです。そのため、ロード時に ajax を呼び出し、リストを取得してソースに追加します。

あなたの場合、ユーザーが入力したものは何でもクエリして、サーバーに送信する必要があると思います。これは、data-source に関数 param を追加することで実行できます。この関数は、クエリとコールバックの 2 つの引数を取得します。

ここをチェック

于 2013-06-06T07:02:40.107 に答える