Question

起初，它起作用了。但是这段代码不再适用了。

Answer 1

这是一个有效的实际代码段（你的JSON无效，它不会加载data.json，因为SO不知道那是什么）。为了能够进一步帮助你，我需要知道href究竟是什么意思？一旦我完全理解你的要求，我会修改这个答案。当您选择自动完成的实时搜索条目时，您已经有一个点击事件，为什么不直接进入？或者您希望在点击实时搜索条目后重新定位页面？

$(document).ready(function() {

  $.ajaxSetup({
    cache: false
  });

  $('#search').keyup(function() {
  
    $('#result').html('');
    $('#state').val('');
    var searchField = $('#search').val();
    var expression = new RegExp(searchField, "i");

    $.getJSON('https://api.myjson.com/bins/znh29', 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"><img src="' + value.image + '" height="40" width="40" class="img-thumbnail" /> ' + value.name + ' | <span class="text-muted">' + value.location + '</span></li>');
        }
      });
    });

  });

  $('#result').on('click', 'li', function() {
    var click_text = $(this).text().split('|');
    click_text = $.trim(click_text[0]);
    $('#search').val(click_text);
    $("#result").html('');
    // YOUR CUSTOM URL HERE:
    window.location.href = "https://stackoverflow.com/?data=" + click_text;
  });

});

#result {
  position: absolute;
  width: 100%;
  max-width: 870px;
  cursor: pointer;
  overflow-y: auto;
  max-height: 400px;
  box-sizing: border-box;
  z-index: 1001;
}

.link-class:hover {
  background-color: #f1f1f1;
}

<!DOCTYPE html>
<html>

<head>
  <title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <br /><br />
  <div class="container" style="width:900px;">
    <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
    <h3 align="center">Employee Data</h3>
    <br /><br />
    <div align="center">
      <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
    </div>
    <ul class="list-group" id="result"></ul>
    <br />
  </div>
</body>

</html>

Answer 2

只需将下面的代码替换为问题中提到的代码即可。

$('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <a class="text-muted" href="'+value.location+'">'+value.location +'</a></li>');

我用span标签替换了span标签，你可以注意到点击它时href链接有效。希望这可以帮助您解决问题。这将仅显示可点击链接的位置。

如果要在单击显示的名称或位置时重定向到href位置，我建议使用下面的代码进行替换。这将显示名称和位置作为可点击链接。

$('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> <a class="text-muted" href="'+value.location+'">'+value.name+' | '+value.location +'</a></li>');

要使li onclick事件重定向到href位置，请使用以下代码。

$('#result').append('<a class="text-muted" href="'+value.location+'"><li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | '+value.location +'</li></a>');

将名称和位置的css更改为下方，使其看起来像纯文本而不是锚链接。

 a {
    text-decoration: none;
    color: black;
 }

如何添加与每个链接关联的JSON数据？

2 个答案: