Django haystack自動完成ajax（href包裝到對象中）

Question

我是新來的ajax和jQuery，我想在自動完成的搜索中使用它。我遵循官方Haystack教程進行自動填充（here），我可以正確顯示結果。現在我想讓顯示的結果包含到正確頁面的鏈接，我不知道該怎麼做。我試圖包裹{{ result.object.get_absolute_url }}，（與我顯示搜索結果時沒有自動完成使用）入：

var base_elem = $('<div class="result-wrapper"><a href="{{ result.object.get_absolute_url }}" class="ac-result"></a></div>') 

，但它不工作。

有人可以展示並解釋如何在結果中包裝url上下文嗎？顯然，將鏈接封裝在結果中的關鍵不在Javascript中，而是在服務器端構建URL並將其傳遞迴結果。

觀點：

def autocomplete(request): 
    sqs = SearchQuerySet().autocomplete(content_auto=request.GET.get('q', ''))[:10] 
    suggestions = [result.username or result.title for result in sqs] 
    the_data = json.dumps({ 
     'results': suggestions 
    }) 
    return HttpResponse(the_data, content_type='application/json') 

的Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    // In a perfect world, this would be its own library file that got included 
    // on the page and only the ``$(document).ready(...)`` below would be present. 
    // But this is an example. 
    var Autocomplete = function(options) { 
     this.form_selector = options.form_selector 
     this.url = options.url || '/search/autocomplete/' 
     this.delay = parseInt(options.delay || 300) 
     this.minimum_length = parseInt(options.minimum_length || 3) 
     this.form_elem = null 
     this.query_box = null 
    } 

    Autocomplete.prototype.setup = function() { 
     var self = this 

     this.form_elem = $(this.form_selector) 
     this.query_box = this.form_elem.find('input[name=q]') 

     // Watch the input box. 
     this.query_box.on('keyup', function() { 
     var query = self.query_box.val() 

     if(query.length < self.minimum_length) { 
      return false 
     } 

     self.fetch(query) 
     }) 

     // On selecting a result, populate the search field. 
     this.form_elem.on('click', '.ac-result', function(ev) { 
     self.query_box.val($(this).text()) 
     $('.ac-results').remove() 
     return false 
     }) 
    } 

    Autocomplete.prototype.fetch = function(query) { 
     var self = this 

     $.ajax({ 
     url: this.url 
     , data: { 
      'q': query 
     } 
     , success: function(data) { 
      self.show_results(data) 
     } 
     }) 
    } 

    Autocomplete.prototype.show_results = function(data) { 
     // Remove any existing results. 
     $('.ac-results').remove() 

     var results = data.results || [] 
     var results_wrapper = $('<div class="ac-results"></div>') 
     var base_elem = $('<div class="result-wrapper"><a href="{{ result.object.get_absolute_url }}" class="ac-result"></a></div>') 

     if(results.length > 0) { 
     for(var res_offset in results) { 
      var elem = base_elem.clone() 
      // Don't use .html(...) here, as you open yourself to XSS. 
      // Really, you should use some form of templating. 
      elem.find('.ac-result').text(results[res_offset]) 
      results_wrapper.append(elem) 
     } 
     } 
     else { 
     var elem = base_elem.clone() 
     elem.text("No results found.") 
     results_wrapper.append(elem) 
     } 

     this.query_box.after(results_wrapper) 
    } 

    $(document).ready(function() { 
     window.autocomplete = new Autocomplete({ 
     form_selector: '.autocomplete-me' 
     }) 
     window.autocomplete.setup() 
    }) 
    </script> 

感謝

Answer 1

JavaScript有沒有解析Django的模板標籤的方式，所以在這種情況下：

<a href="{{ result.object.get_absolute_url }}" class="ac-result"> 

的href將字面意思是「{{ result.object.get_absolute_url }}」。您需要做的是在服務器端上構建URL，並在撥打/search/autocomplete/時將其傳遞迴results數據。

---

基於更新的代碼，你只需要在服務器生成（用於Django的對象，它具有其他好處可能使用get_absolute_url）到您的項目鏈接一些如何與包括在返回的JSON。

def autocomplete(request): 
    sqs = SearchQuerySet().autocomplete(content_auto=request.GET.get('q', ''))[:10] 
    suggestions = [ {'text':result.username or result.title, 
         'url':generate_url(result), } 
        for result in sqs 
        ] 
    the_data = json.dumps({ 
     'results': suggestions 
    }) 
    return HttpResponse(the_data, content_type='application/json') 

然後更新Autocomplete.prototype.show_results相應的循環：

var base_elem = $('<div class="result-wrapper"><a href="" class="ac-result"></a></div>') 

    if(results.length > 0) { 
    for(var res_offset in results) { 
     var elem = base_elem.clone() 
     // Don't use .html(...) here, as you open yourself to XSS. 
     // Really, you should use some form of templating. 
     elem.find('.ac-result').text(results[res_offset].text) 
     elem.find('.ac-result').attr("href",results[res_offset].url) 

     results_wrapper.append(elem) 
    } 
    }