如果json文件中不存在名称,如何显示错误?

如果名称在json文件中不存在,我就卡住了如何显示错误。我已经尝试过if(searchField!= value.name.search(expression))和if(searchField!= value.name)但它不起作用。这是我尝试的代码。请帮忙。谢谢

js代码

$(document).ready(function() {
  $('.dropbox').css('border','none');
  $.ajaxSetup({
    cache: false
  });
  $('#search').keyup(function() {
    $('#searchResult').html('');
    $('#state').val('');
    var searchField = $('#search').val().trim();
    var expression = new RegExp(searchField,"i");
    console.log(expression);
    $.getJSON('result.json',function(data) {
      $.each(data,function(key,value) {
        if (value.name.search(expression) != -1) {
          $('.dropbox').css('border','1px solid #EBEDF8');
          $('#searchResult').append('<ul><li><div class="img_c"><img src="' + value.imgURL + '" alt="Profile Pic"></div><div class="content-box"> ' + value.name + '|<span>' + value.city + ',' + value.state + '</span></div></li></ul>');
        }
        if (searchField === '') {
          $('#searchResult').html('<div class="message">No matches found</div>');

        }
      });
    });
  });
  $('#searchResult').on('click','li',function() {
    var click_text = $(this).text().split('|');
    $('.dropbox').css('border','none');
    $('#search').val($.trim(click_text[0]));
    $("#searchResult").html('');
  });
});

HTML

<div class="dropbox">
    <div id="searchResult"></div>
</div>

result.json文件

[
 {
     "id":1,"name":"John","city":"London City","state":"London","imgURL":"images/pic.svg"

 },{
    "id":2,"name":"Mathew","city":"New York City","state":"NY","imgURL":"images/pic.svg"

},{
     "id":3,"name":"Jackson","city":"Washington","state":"DC","imgURL":"images/pic.svg"

 }

]
yanglibaoqi 回答:如果json文件中不存在名称,如何显示错误?

尝试这种方式:

var data=[
 {
     "id":1,"name":"John","city":"London City","state":"London","imgURL":"images/pic.svg"

 },{
    "id":2,"name":"Mathew","city":"New York City","state":"NY","imgURL":"images/pic.svg"

},{
     "id":3,"name":"Jackson","city":"Washington","state":"DC","imgURL":"images/pic.svg"

 }

];
function a(){
  var searchField=$("input").val();
  if(searchField==''){$("#results").empty();return;}
  var expression = new RegExp(searchField,"i");
  console.log(expression);
  $("#results").empty(). append ("<ul>");
  $.each(data,function(key,value) {
        if ((value.name).match(expression) != null) {
          $("#results").append('<li><div class="img_c"><img src="' + value.imgURL + '" alt="Profile Pic"></div><div class="content-box"> ' + value.name + '|<span>' + value.city + ',' + value.state + '</span></div></li>');
          }else{ $("#results").append(''); $("#results").append("</ul>");}      
      });}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input onkeyup="a()">
<div id="results"></div>

,

要在没有结果匹配的情况下显示错误,只需使用else子句

    if (value.name.search(expression) != -1) {
      $('.dropbox').css('border','1px solid #EBEDF8');
      $('#searchResult').append('<ul><li><div class="img_c"><img src="' + value.imgURL + '" alt="Profile Pic"></div><div class="content-box"> ' + value.name + '|<span>' + value.city + ',' + value.state + '</span></div></li></ul>');
    }else{
       // if no match append error-message
       $('#searchResult').append("<p>No results found </p>");
    }
本文链接:https://www.f2er.com/3167397.html

大家都在问