添加未找到结果选项

Question

我正在使用脚本来自动填充搜索字段。我正在尝试添加“找不到结果”选项，当找不到任何后面的超链接时。我正在努力弄清楚如何添加一个else（）来显示文本。

如何添加此脚本？谢谢。

$(document).ready(function(){
     $.ajaxSetup({ cache: false });
     $('#search').keyup(function(){
      $('#result').html('');
      $('#state').val('');
      var searchField = $('#search').val();
      var expression = new RegExp(searchField, "i");
      $.getJSON('data.json', function(data) {
       $.each(data, function(key, value){
        if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
        {
         $('#result').append('<li class="list-group-item link-class"> '+value.name+'</li>');
        }
       });   
      });
     });

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

Answer 1

我会在循环中使用布尔值来表示找到一个布尔值，然后在循环后检查布尔值。

$.getJSON('data.json', function(data) {
  var found = false;

  $.each(data, function(key, value) {
    if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {
      found = true;

      $('#result').append('<li class="list-group-item link-class"> ' + value.name + '</li>');
    }
  });

  if (!found) {
    $('#result').append('<li class="list-group-item link-class">NOTHING FOUND</li>');
  }
});

---

另一个选择是在加入之前将结果加入.filter()。然后你可以简单地检查过滤后的数组的长度（假设它是一个数组）。

$.getJSON('data.json', function(data) {
  var filtered = data.filter(function(value) {
    return value.name.search(expression) != -1 ||
           value.location.search(expression) != -1;
  });

  var res = $('#result');

  if (filtered.length) {
    filtered.forEach(function(value) {
      res.append('<li class="list-group-item link-class"> ' + value.name + '</li>');
    });
  } else {
    res.append('<li class="list-group-item link-class">NOTHING FOUND</li>');
  }
});

---

并且扩展到那个，我想我实际上将字符串映射到数组，并做一个附加。

$.getJSON('data.json', function(data) {
  var liHTML = data.filter(function(value) {
    return value.name.search(expression) != -1 ||
           value.location.search(expression) != -1;
  }).map(function(value) {
     return '<li class="list-group-item link-class"> ' + value.name + '</li>';
  });

  if (!liHTML.length)
    liHTML.push('<li class="list-group-item link-class">NOTHING FOUND</li>');

  $('#result').append(liHTML.join(""));
});

Answer 2

看起来很奇怪你每次都得到一个（显然）静态JSON值，所以我把它和其他一些东西一起缓存了。请注意，如果结果数据不是静态的，您可能想要限制快速键人员的键盘。

它有助于看到要测试的实际JSON的剪辑，但这应该工作。

• 使用let来避免全局蠕变
• 缓存选择器以避免DOM遍历
• 使用推荐的文档就绪处理程序表
• 从JSON得到一次价值（我的假设它是静态的但是看起来如此
• 添加更改甚至粘贴文本到字段（或其他代码更改它像测试 - 请注意你在那里的点击处理程序！
• 使用.remove()为孩子，也许更快，用最大的真实数据测试
• 添加a没有结果，将其修复到正确的位置/ href

$(function() {
  $.ajaxSetup({
    cache: false
  });
  // cache selectors
  let result = $('#result');
  let state = $('#state');
  let search = $('#search');
  // create empty item
  let resultItem = $('<li class="list-group-item link-class"></li>');
  // create no results from empty item, COULD be dynamic `href` if needed
  let noResultItem = resultItem.clone().html('<a href="#somewhere">No Results</a>');
  // We might not need to get this every time? cache it
  let dataHold = {}; // empty holder
  $.getJSON('data.json', function(data) {
    dataHold = data;
  });
  // change event also for paste etc users.
  search.on('keyup change', function() {
    // might be faster than .html(''). test this assumption
    result.children().remove();
    state.val('');// not sure what this is for or what sets it
    let searchField = search.val();
    let expression = new RegExp(searchField, "i");
    // COULD cache the found results set IF it is large and append once
    $.each(dataHold, function(key, value) {
      if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {
        result.append(resultItem.clone().text(value.name));
      }
    });
    // no match? use empty
    if (!result.children().length) {
      noResultItem.appendTo(result);
    }
  });
  // do we want the class 'li.list-group-item' also?
  result.on('click', 'li', function() {
    let click_text = $(this).text().split('|');
    search.val($.trim(click_text[0]));
    result.children().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Search: <input id="search" type="text" /></label>
<label>State: <input id="state" type="text" value="i do no  know" /></label>
<ul id="result"></ul>