时间戳

首页 > 解决方案 > 在 JSON 文件中搜索并将值返回到 HTML 标记

javascript - 在 JSON 文件中搜索并将值返回到 HTML 标记

问题描述

我正在研究一个搜索框，在这个搜索框中我搜索所有行并在标签中显示结果，选择结果后，该值将添加到搜索框中。但它不会显示在 HTML 标记中。在以下几行中，我分享了代码。

    $(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $('#search').keyup(function(){
     $('#result').html('');
     $('#state').val('');
     var searchField = $('#search').val();
     var expression = new RegExp(searchField, "i");
     $.getJSON('json/db.json', function(data) {
      $.each(data, function(key, value){
       if (value.InstrumentID.search(expression) != -1 || value.LVal18.search(expression) != -1 || value.LVal18AFC.search(expression) != -1 || value.LVal30.search(expression) != -1 || value.CompanyLVal18AFC.search(expression) != -1 || value.CompanyLVal30.search(expression) != -1) 
       {
        $('#result').append('<li class="list-group-item link-class"> '+value.LVal30+' | <span class="text-muted">'+value.LVal18AFC+'</span></li>');
       }
      });   
     });
    });
    
    $('#result').on('click', 'li', function() {

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

    
    $("#getValue").click(function(){
        console.log(value.LVal30);
    });
});

此外，JSON 格式如下：

[{ "InstrumentID": "IR0101", "LVal18": "AR", "LVal18AFC": "AR", "LVal30": "AR", "CompanyInstrumentID": "IRO101", "CompanyLVal18AFC": "AR", "CompanyLVal30": "AR" }, { "InstrumentID": "IRR1C0101", "LVal18": "Chadormalu-R", "LVal18AFC": "AB", "LVal30": "AB", "CompanyInstrumentID": "IRO0001", "CompanyLVal18AFC": "AB", "CompanyLVal30": "AB" } ]

我有一个简单的输入，如下所示：

<div class="input-group">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="getValue" >Chose</button>
        </div>
        <input type="text" name="search" id="search" placeholder="Search" class="form-control" data-value >


    </div>
    <ul class="list-group" id="result"></ul>

正如您在图片中看到的那样，我在框中得到了结果，但控制台中没有任何反应！ 结果出现在机器人中我没有得到任何登录控制台。

编辑 - 添加错误：

Uncaught ReferenceError: value is not defined
    at HTMLButtonElement.<anonymous> (script3.js:138)
    at HTMLButtonElement.dispatch (jquery-3.5.1.js:5429)
    at HTMLButtonElement.elemData.handle (jquery-3.5.1.js:5233)

script3.js 的第 138 行是：

console.log(value.LVal30);

标签： javascriptjquery

解决方案

您可以尝试以下方法来过滤 JSON 数据。

var data = [{ "InstrumentID": "IR0101", "LVal18": "AR", "LVal18AFC": "AR", "LVal30": "AR", "CompanyInstrumentID": "IRO101", "CompanyLVal18AFC": "AR", "CompanyLVal30": "AR" }, { "InstrumentID": "IRR1C0101", "LVal18": "Chadormalu-R", "LVal18AFC": "AB", "LVal30": "AB", "CompanyInstrumentID": "IRO0001", "CompanyLVal18AFC": "AB", "CompanyLVal30": "AB" } ]

var searchterm="Company";
var result = data.filter(item=> {
  var keys = Object.keys(item);
  var found= keys.filter(key=> {
    if (item[key].toLowerCase().indexOf(searchterm) != -1) {
      return item;
    }
  });
  return ((found && found.length >0) ? true : false);
})
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

一旦你得到数据。循环通过它并在你的 HTML 中显示它，如下所示。

result.map(value=> {
     $('#result').append('<li class="list-group-item link-class"> '+value.LVal30+' | <span class="text-muted">'+value.LVal18AFC+'</span></li>');
});

推荐阅读