Question

我从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": ""
}

在这里，我将搜索项目，名称或实例等。

这是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>

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

Answer 1

这是从Jquery ui自动完成的：

＆＃13;

let backButton = UIBarButtonItem(title: domain, style: .plain, target: nil, action: nil)
self.navigationItem.backBarButtonItem = backButton.

＆＃13;

  $( 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);
           }
    });
  } );

＆＃13;

＆＃13; 如果您想要带有ajax的来源：

  <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">

如何从json搜索文本并在html中显示？

1 个答案: