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">

网址.py

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

模型.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 和 responsive 创建引导输入。

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

4

2 回答 2

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....">

基本上你的其余代码都可以。

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

希望这对你有用！

于 2013-06-05T17:56:05.133 回答
1

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

我认为，就您而言，您需要查询用户键入的任何内容，并将其发送到服务器。这可以通过在数据源中添加函数参数来完成，该函数有 2 个参数，查询和回调。

在这里检查

于 2013-06-06T07:02:40.107 回答