Question

我正在尝试从JSON获取数据并将其与我的“搜索”功能一起呈现，在我显示数据后，我想清除结果，直到用户输入新单词。现在它显示我的所有JSON文件而不清除它。

代码如下：

<body>
    <br>
    <div id="searcharea">
        <h2>Search Word</h2>
        <input type="search" id="search"/>
    </div>
    <div id="update">
    </div>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

    <script type="text/javascript">
    $('#search').keyup(function() { //when key is pressed in search bar
        var searchTerm = $(this).val(); //val of search bar
        var myExp = new RegExp(searchTerm, "i"); //regular experation

        $.getJSON('index.json', function(data){     //get the json file
            var output = "<ul id='result'>";
            $.each(data, function(key, val){
                if(val.name.search(myExp) != -1){   //search for the data in the json file
                    output += '<li>';
                    output += '<h3>' +val.name+ '</h3>';
                    output += '<h3>' +val.song+ '</h3>';
                    output += '<h3>' +val.part+ '</h3>';
                    output += '</li>';
                }
            });//end each
            output += "</ul>";
            $('#update').html(output); //output result to the update div
        });
    });
    </script>
</body>

JSON文件如下所示：

[
    {
        "name":"Word: 'asked' ",
        "song":"Name of the song: 'Drive My Car' ",
        "part":"Part: 1"
    },
    {
        "name":"Word: 'a' ",
        "song":"Name of the song: 'Drive My Car' ",
        "part":"Part: 1, 2, 3"
    }
]

Answer 1

请尝试此操作。此外，我建议您使用.trim功能。

$('#search').keyup(function () { //when key is pressed in search bar
 var searchTerm = $(this).val(); //val of search bar
 var myExp = new RegExp(searchTerm, "i"); //regular experation

 var output = "<ul id='result'>";
 if (searchTerm.trim()!= '') {
     $.getJSON('index.json', function (data) { //get the json file
         $.each(data, function (key, val) {
             if (val.name.search(myExp) != -1) { //search for the data in the json file
                 output += '<li>';
                 output += '<h3>' + val.name + '</h3>';
                 output += '<h3>' + val.song + '</h3>';
                 output += '<h3>' + val.part + '</h3>';
                 output += '</li>';
             }
        }); //end each
     });
  }

  output += "</ul>";
  $('#update').html(output); //output result to the update div
});

这是一个有效的solution

另一种方法是使用此代码：

if(searchTerm!="")
      $('#update').html(output); //output result to the update div
else
      $('#update').html('');

Answer 2

$('#search').keyup(function () { //when key is pressed in search bar
    var searchTerm = $(this).val(); //val of search bar
    var myExp = new RegExp(searchTerm, "i"); //regular experation

    var output = "<ul id='result'>";

    if (searchTerm != "") {
        $.getJSON('index.json', function (data) { //get the json file
            $.each(data, function (key, val) {
                if (val.name.search(myExp) != -1) { //search for the data in the json file
                    output += '<li>';
                    output += '<h3>' + val.name + '</h3>';
                    output += '<h3>' + val.song + '</h3>';
                    output += '<h3>' + val.part + '</h3>';
                    output += '</li>';
                }
            }); //end each
        });
    }

    output += "</ul>";
    $('#update').html(output); //output result to the update div
});

示例：

＆＃13;

var data = [{
  "name": "Word: 'asked' ",
  "song": "Name of the song: 'Drive My Car' ",
  "part": "Part: 1"
}, {
  "name": "Word: 'a' ",
  "song": "Name of the song: 'Drive My Car' ",
  "part": "Part: 1, 2, 3"
}];

$('#search').keyup(function() { //when key is pressed in search bar
  var searchTerm = $(this).val(); //val of search bar
  var myExp = new RegExp(searchTerm, "i"); //regular experation

  var output = "<ul id='result'>";
  if (searchTerm != "") {
    $.each(data, function(key, val) {
      if (val.name.search(myExp) != -1) { //search for the data in the json file
        output += '<li>';
        output += '<h3>' + val.name + '</h3>';
        output += '<h3>' + val.song + '</h3>';
        output += '<h3>' + val.part + '</h3>';
        output += '</li>';
      }
    }); //end each
  }
  output += "</ul>";
  $('#update').html(output); //output result to the update div
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searcharea">
  <h2>Search Word</h2>
  <input type="search" id="search" />
</div>
<div id="update">
</div>

＆＃13;

如何使用JQuery和Javascript清除json文件的结果？

2 个答案: