Question

我想通过使用json文件作为数据源的tomcat服务器在HTML页面上显示Neo4j图形数据库中存在的节点。现在我想搜索json数据，即当我开始在HTML输入框中搜索时，用json文件数据自动完成输入。请建议我做的输入。我尝试编写代码，但我的努力是徒劳的。提前致谢。这是代码： -

<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>

无法在HTML输入字段中搜索json数据

0 个答案: