2013-08-22 28 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'} 
      ]); 
     },