css - 静态页面上的搜索框

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

我们的想法是实现一个搜索框，其外观和感觉与 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 - 文件:

和 1 java script file .

虽然该页面(当然这只是一个测试)具有我正在寻找的外观和感觉，但搜索功能尚不可用。

我基于 on a working example

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

最佳答案

我设法通过一些修补让它工作。 :-)

Testing a search bar

    <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

关于css - 静态页面上的搜索框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45574978/

css - 静态页面上的搜索框

上一篇：jquery - 将 div 的内容自动调整到隐藏的溢出 div

下一篇：jquery - 自动播放视频仅适用于调整大小操作