1

I wanted to display the nodes present in the Neo4j graph data-base on a HTML page through tomcat server using json file as a datasource. And now I want to search the json data i.e autocomplete the input with the json file data, when I start searching in the HTML input box.Please suggest me the inputs to do it.I have tried writing the code but my efforts were in vain.Thanks in advance. here is the code:-

<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="alchemy.min.css">
    <script src="alchemy.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/styles/vendor.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <title>Search on the way</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
  <body class="bd_main">
        <form class="form-inline col-md-12 n_bar" id="searchform" method="get" role="search">
            <div class="form-group col-md-offset-2">
                <select class="form-control col-md-4">
                    <option value="h">Hardness</option>
                    <option value="v">Viscosity</option>
                    <option value="r">Rebound(70C)</option>
                    <option value="ap">Air Permeability</option>
                </select>                
            </div>
            <div class="ui-widget form-group">
                <input type="text" class="form-control col-md-offset-1 col-md-3" placeholder="Search for the value" id="tags">                
            </div>
            <button type="submit" class="btn btn-primary col-md-offset-1">VIEW</button>
        </form>
        <div class="alchemy t_display col-md-12" id="alchemy"></div>
        <script type="text/javascript">
            alchemy.begin({
                dataSource: "process.json", 
                dataType:'html',
                nodeCaption: 'name', 
                nodeMouseOver: 'cluster',
                edgeCaption: 'target',
                edgeMouseOver: 'value',
                cluster: true,
                clusterColours: ["#1B9E77","#D95F02","#7570B3","#E7298A","#66A61E","#E6AB02"]})
        </script>
        <script>
            var xhr;
                $( "#tags" ).autocomplete({
                    delay: 0,
                    source: function( request, response ) {
                    var regex = new RegExp(request.term, 'i');
                        if(xhr)
                        {
                            xhr.abort();
                        }
                xhr = $.ajax({
                        dataSource: "process.json",
                        dataType: "json",
                        cache: false,
                    success: function(process) {
                        response($.map(process.nodes, function(node) {
                            if(regex.test(node.name)){
                                return {
                                    name: node.name,
                                    id: node.id                    
                                };
                            }
                        }));
                    }
                });
                },
                minlength:0
              });
        </script>

  </body>
</html>
Frank Pavageau
  • 11,477
  • 1
  • 43
  • 53
saiteja pasula
  • 33
  • 3
  • I don't know if i am wrong or right try **url:** instead of **dataSource:** – Redhya Nov 25 '16 at 05:47
  • Tried it.I am able to see the blocks display.But there are no values displayed on the suggestion in the search box in HTML.And thanks btw. – saiteja pasula Nov 25 '16 at 05:58
  • have you checked that your code is entering this `if(regex.test(node.name))` condition or not – Redhya Nov 25 '16 at 06:01
  • Yes It is.But it is not returning the values of the name and id.I have checked using console.log().Any further inputs are welcome from you.TIA – saiteja pasula Nov 25 '16 at 08:05
  • I haven't heard about dataSource in ajax. Anyway use `url: filename, data: { term: request.term }` – Redhya Nov 25 '16 at 08:40
  • Possible duplicate of [IndexedDB Fuzzy Search](https://stackoverflow.com/questions/7086180/indexeddb-fuzzy-search) – Paul Sweatte Jul 11 '17 at 01:57

0 Answers0