使用Django的jQuery ui自动完成返回404

时间:2015-06-03 16:25:51

标签: python django jquery-ui

我正在使用jQuery UI和Django模型实现自动完成搜索。

这是我的view

def get_ticker(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        symbols = Symbol.objects.filter(name__istartswith=q)
        results = []
        for symbol in symbols:
            symbol_json = {'name': symbol.name, 'symbol': symbol.symbol}
            results.append(symbol_json)
        data = json.dumps(results)
    else:
        data = 'Can\'t get data...'
    mimetype = 'application/json'
return HttpResponse(data, mimetype)

url

url(r'^api/get_ticker/$', views.get_ticker, name='get_ticker'),

js

$(function() {
   $("#ticker").autocomplete({
      source: "{% url get_ticker %}",
      minLength: 2,
   });
});

html

 <div class="ui-widget">
      <input type="text" id="ticker">
 </div>

当我在搜索框中输入内容时,出现错误:

GET http://127.0.0.1:8000/finance/%7B%%20url%20get_ticker%20%%7D?term=hello 404 (NOT FOUND)

3 个答案:

答案 0 :(得分:1)

我怀疑你是单独提供JS文件的。如果是这种情况,那么你必须:

自己在JS文件中编写完整的URL。

source: "/api/get_ticker/",

复制HTML模板中的脚本。

<script>
    $(function() {
       $("#ticker").autocomplete({
           source: "{% url 'get_ticker' %}",
           minLength: 2,
       });
   });
</script>

答案 1 :(得分:0)

试试这个:

$(function(){
  $('#ticker').autocomplete({
    source: "{% url 'get_ticker' %}",
    minLength: 2,
  });
});

答案 2 :(得分:0)

替换:

<div class="row">
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
    <div class="col-4">
        <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg"
             alt=" "/>
        <div class="logo">
            <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/>
        </div>
        <span class="overlay-bg"></span>
    </div>
</div>

 "{% url get_ticker %}"

记下引号