Question

对于用户进行的每次搜索，都会从类别（类别1和类别2）中显示搜索建议，但是当单击类别下的项目时，似乎不会将它们带到任何页面。帮助显示我如何将特定的URL附加到每个类别，以便在建议并单击该类别下的项目时，将用户定向到分配的URL页面。

var searchItems = [
{
 name: "Category 1",
 results: [
{
 title: "Pizza",
description: "Optional Description"
},
  {
          title: "Burger",
          description: "Optional Description"
        }
      ]
    },
    {
      name: "Category 2",
      results: [
        {
          title: "Noddles",
          description: "Optional Description"
        }
      ]
    }
];

$(function(){

  $('#searchInput').search({
        apiSettings: {
        'response': function (e) {
            var searchTerm = e.urlData.query;

            var result = searchItems.map(function (cat) { 

                var items = cat.results.filter(function (item) {
                  return item.title.toLowerCase().includes(searchTerm.toLowerCase());
                });

                if(items !== null)
                {
                    var category = {'name' : cat.name};
                    category.results = items;
                    return category;
                }
            });    

            return {'results' : result };
        }
    },
    type: 'category'
  });
});



<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.min.css">
    <script src="https://semantic-ui.com/dist/semantic.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="ui container">
      <h2 class="ui header">Local category search</h2>
      Type in 'result'
      <div class="ui segment">
        <div id="searchInput" class="ui category search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search categories...">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>          
      </div>
    </div>
  </body>      
</html>

<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.min.css">
    <script src="https://semantic-ui.com/dist/semantic.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="ui container">
      <h2 class="ui header">Local category search</h2>
      Type in 'result'
      <div class="ui segment">
        <div id="searchInput" class="ui category search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search categories...">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>          
      </div>
    </div>
  </body>      
</html>




var searchItems = [
    {
      name: "Category 1",
      results: [
        {
          title: "Pizza",
          description: "Optional Description"
        },
        {
          title: "Burger",
          description: "Optional Description"
        }
      ]
    },
    {
      name: "Category 2",
      results: [
        {
          title: "Noddles",
          description: "Optional Description"
        }
      ]
    }
];

$(function(){

  $('#searchInput').search({
    apiSettings: {
        'response': function (e) {
            var searchTerm = e.urlData.query;

            var result = searchItems.map(function (cat) { 

                var items = cat.results.filter(function (item) {
                  return item.title.toLowerCase().includes(searchTerm.toLowerCase());
                });

                if(items !== null)
                {
                    var category = {'name' : cat.name};
                    category.results = items;
                    return category;
                }
            });    

            return {'results' : result };
        }
    },
    type: 'category'
  });
});

如何为每个搜索结果添加特定的链接？

0 个答案: