Question

我有一个包含常见问题解答的页面。

这个想法是实现一个具有外观和效果的搜索框。感觉Font awesome Icons

上显示的那个

通过一些在线帮助，我已经能够生成以下代码：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Testing a search bar</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
  <script src="/Scripts/Searchbar.js"></script>
  <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
  <link href="/CSS/site.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container" data-view="search">
    <div class="row">
      <div class="col-md-10 col-sm-9">
        <section id="search">
          <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
          <input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
        </section>
      </div>
    </div>

    <div id="faqs">
      <h3>Question 1</h3>
      <section>
        Answer 1<br> abc
      </section>
      <h3>Question 2</h3>
      <section>
        Answer 2<br>xyz
      </section>
      <h3>Question 3</h3>
      <section>
        Answer 3<br>def
      </section>
    </div>
  </div>
</body>

</html>

代码使用2个css - files：

site.css
enter link description here

和1 java script file。

虽然页面（这当然只是一个测试）具有外观和效果。感觉我在寻找，搜索功能还没有用。

我的基础是on a working example

这里的任何人都可以告诉我我必须做些什么才能让它像示例一样工作？

Answer 1

我设法通过一些修补工作。： - ）

测试搜索栏

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script> 
    <script src="/Scripts/FontAwesome.js"></script>

    <%--    <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
            <link href="/CSS/site.css" rel="stylesheet" type="text/css" />
    --%>
     <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
     <link href="/CSS/searchbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" data-view="search">
        <div class="row">
            <div class="col-md-10 col-sm-9">
                <section id="search">
                    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search

FAQ

        <div id="faqs">
            <h3>Question 1</h3>
            <section>
                Answer 1<br> abc
            </section>
            <h3>Question 2</h3>
            <section>
                Answer 2<br>xyz
            </section>
            <h3>Question 3</h3>
            <section>
                Answer 3<br>def
            </section>
        </div>
    </div>

    <script src="/Scripts/Searchbar.js"></script>
</body> </html>

如您所见，我将searchbar.js置于可能的最低级别，并将site.css替换为searchbar.css

Answer 2

我认为更好的解决方案是引入一个像knockout.js这样的轻量级MVVM框架。有了这个，您可以将所有常见问题解答放入视图模型中，并轻松地以这种方式添加搜索功能。这将显着清理您的HTML，特别是如果您的网站上添加了越来越多的常见问题解答。

静态页面上的搜索框

2 个答案: