2013-08-22 60 views
2

實施VisualSearch.js我試圖用jQuery的阿賈克斯REST APINeo4j的GraphDB在後端實現VisualSearch.js。我已經在這個link,通過使用紅寶石執行相同的職位。使用jQuery的Ajax,REST API和Neo4j的GraphDB

這是我的代碼。

var visualSearch;  

$(document).ready(function() { 
var facets=[]; 
$.ajax("/facets", { 
    type:"GET", 
    dataType:"json", 
    success:function (res) { 
     facets = res; 
    } 
}); 

     visualSearch = VS.init({ 
     container : $('#search_box_container'), 
     query  : '', 
     showFacets : true, 
     unquotable : [ 
     'text', 
     'account', 
     'filter', 
     'access' 
     ], 
     callbacks : { 
     search : function(query, searchCollection) { 
      var $query = $('#search_query'); 
      var count = searchCollection.size(); 
     $query.stop().animate({opacity : 1}, {duration: 300, queue: false}); 
      $query.html('<span class="raquo">&raquo;</span> You searched for: ' + 
        '<b>' + (query || '<i>nothing</i>') + '</b>. ' + 
        '(' + count + ' node' + (count==1 ? '' : 's') + ')'); 
      clearTimeout(window.queryHideDelay); 
      window.queryHideDelay = setTimeout(function() { 
      $query.animate({ 
       opacity : 0 
      }, { 
       duration: 1000, 
       queue: false 
      }); 
      }, 2000); 
     }, 

    valueMatches : function(facet, searchTerm, callback) { 
    alert(facet)   
    var restServerURL = "http://localhost:7474/db/data"; 
    $.ajax({ 
      type: "POST", 
     contentType: "application/json; charset=utf-8", 
      url: restServerURL, 
      dataType: "json", 
      contentType: "application/json", 
     data: { /*Query goes here.*/ }, 
      success: function(data, xhr, textStatus) { 
       alert(data.self); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
      alert(jqXHR); 
      alert(textStatus);     
      alert(errorThrown); 
      }, 
      complete: function() { 
       alert("Address of new node: " + data.self); 
      } 
    });  
    }, 
     facetMatches : function(callback) { 
     if(visualSearch.searchBox.value() != "") { 
     $.ajax("/connected_facets", { 
       type:"POST", 
       dataType:"json", 
       data: {/*Query goes here.*/}, 
       success:function (res) { 
        callback(res); 
       } 
     }); 
     } else { 
       callback(facets); 
      } 
     } 
     } 
    }); 
    }); 

如果有人能指出問題,這將是一個很大的幫助。在此先感謝:-)

+0

什麼是實際問題?你的代碼的行爲是什麼?如果沒有爲ajax調用編寫一些服務器端處理程序,我不能輕易運行此操作。 – LameCoder

回答

3

我認爲問題是在valueMatches。您不使用傳遞給此函數的回調函數。如果您挖掘VisualSearch來源(visualsearch.js:696),您會看到此回調(代碼中的第701-727行)將valueMatches過濾的建議數據提供給jQuery自動完成,即VisualSearch構建於其上(請參閱visualsearch.js:1043)。

所以你的情況就會是這樣的:

 valueMatches: function(facet, searchTerm, callback) { 
      var restServerURL = "http://localhost:7474/db/data"; 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: restServerURL, 
       dataType: "json", 
       data: {facet: facet, query: searchTerm}, 
       success: function(data) { 
        callback(data); 
       } 
      }); 
     }, 

此代碼假定上面你在URL應用程序接收方面查詢 POST變量並供應的答案作爲JSON數組,因此它直接傳遞給回調(請參閱成功選項)。

與facetMatches相同。但是,如果您有一組固定的方面,您甚至可以直接在代碼中傳遞它們:

 facetMatches: function(callback) { 
      callback([ 
       {label: 'facet1', category: 'cat1'}, 
       {label: 'facet2', category: 'cat1'}, 
       {label: 'facet3', category: 'cat2'}, 
       {label: 'facet4', category: 'cat2'}, 
       {label: 'facet5', category: 'cat2'} 
      ]); 
     },