时间戳

首页 > 解决方案 > 如何从 json 中搜索文本并以 html 显示？

javascript - 如何从 json 中搜索文本并以 html 显示？

问题描述

我从 json 结果中列出项目名称并显示在侧栏中。当单击列出任何项目名称的侧栏时，它会显示它的详细信息。现在我有搜索框来搜索项目并显示项目详细信息并在侧栏中获取选定的项目名称。

这是搜索框代码：

   <input class="form-control form-control-dark w-100" type="text" id="text" placeholder="Search" aria-label="Search">

这是json的结果：

 "projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
 {
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}

在这里，我将搜索 projectid、名称或实例等。

这是html中使用的代码：

 <div class="container-fluid">
  <div class="row">
  <nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div id="projectlist" class="sidebar-sticky">
    <ul class="nav flex-column nav-pills">

      {{range .Projects}}
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">

          <img class="img-fluid" style="width:8%" 
  src="static/image/generic_gcp.png">
          {{.Name}}

          <div>
            <small>
            ProjectId: {{.ProjectID}}
          </small>
          </div>
        </a>
        </li>
        {{end}}

    </ul>

 <!-- Might need this seperator
    <h6 class="sidebar-heading d-flex justify-content-between align-items- 
 center px-3 mt-4 mb-1 text-muted">
      <span>Savings Reports</span>
    </h6>
  -->
  </div>
</nav>
   <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  {{range .Projects}}

  <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
    <h1 class="h2">Project:{{.Name}}</h1>

如何列出搜索和显示项目详细信息并在该项目名称的侧栏中被选中。

标签： javascriptjqueryhtmlcss

解决方案

这是来自 Jquery ui 的自动完成：

  $( function() {
 var projects= [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
 {
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
];
    $( "#projects" ).autocomplete({
      source: function (request, response) {
           response($.map(projects, function (value, key) {
                return {
                    label: value.name+" "+ value.projectid,
                    value: value.projectid
                }
            }));
        
    }, 
      select: function(event, ui) {
           var res= $('#projects').val(ui.item.projectid);
           }
    });
  } );
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 SEarch: <input id="projects">
如果你想要使用 ajax 的源代码：

    var url="";//your url to json file
    source: function(request,response)  
    { 
      $.get(url, function(data)
      {         
        obj = JSON.parse(data);   //parse the data in JSON (if not already)
        response($.map(obj, function(value, key)
        {
         return {
                        label: value.name+" "+ value.projectid,
                        value: value.projectid
                    }
        }));
    }
}

推荐阅读