静态页面上的搜索框

显示随着一点点的在线帮助的那个我已经能够产生以下代码的外观&感觉一个搜索框：

<%@ 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

这里谁能告诉我，我必须做的，使其工作就像例子吗？

来源

2017-08-08 Fysicus

的问题添加CSS以上的标签来吸引正确的人更快 –

你最好的选择是使用这个，http://listjs.com/，永远不要重新发明轮子。 –

我意外地发布了一个链接到错误的js文件。它应该是这一个：[searchbar.js]（https://dl.dropboxusercontent.com/u/54991757/Webdeveloper.com/Search%20on%20a%20static%20page/searchbar.js） – Fysicus

我设法让它有点修补工作。 :-)

测试搜索栏

<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在可能的最低程度，和我一起searchbar.css

来源

2017-08-10 09:41:38 Fysicus

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

来源

2017-08-11 13:45:31

而我将如何去做？我知道knockout.js当然是什么，但是我的想法并不完全清楚。 – Fysicus

尝试把问题对象的数组里面，然后过滤他们的搜索：

演示：https://jsfiddle.net/sjx5uorg/2/

var searchBox = $('#searchinput'); 
 
var faqs = [ 
 
\t { 
 
    \t question: "This is first question", 
 
    answer: "Answer 1" 
 
    }, 
 
\t { 
 
    \t question: "Another question. Second?", 
 
    answer: "Answer 2" 
 
    }, 
 
\t { 
 
    \t question: "Question 3", 
 
    answer: "Answer 3" 
 
    }, 
 
\t { 
 
    \t question: "Question 4", 
 
    answer: "Answer 4" 
 
    } 
 
] 
 

 

 
function updateList(faqArray) { 
 
\t var faqList = $('#faq-list'); 
 
\t faqList.html(''); 
 
\t $.each(faqArray, function(faq) { 
 
\t \t faq = faqArray[faq]; 
 
    \t faqList.append('<li><h3>'+ faq.question +'</h3><p>'+ faq.answer +'</p></li>'); 
 
\t }); 
 
} 
 

 
updateList(faqs); 
 

 
searchBox.keyup(function(event) { 
 
    var searchList = faqs.filter(function(faq){ 
 
    \t var question = faq.question.toLowerCase(); 
 
    return question.indexOf(searchBox.val().toLowerCase()) >= 0 
 
    }); 
 
    updateList(searchList); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<label> 
 
    Search: <input id="searchinput" /> 
 
</label> 
 
<ul id="faq-list"></ul>

来源

2017-08-11 14:24:49 kastriotcunaku

这正是我最初的想法，但常见问题解答是在CMS内部进行维护的，基于页面。 Basicaly，我的客户有一个由3-4人组成的小组，他们可以在CMS中打开每一页（每种支持的语言）并直接在那里编辑它。常见问题将以每种语言的一个大型静态页面提供，他们可以轻松添加或删除新的FAQ。虽然这可以通过让他们编辑JSON或甚至创建一个小网页来解决，但这可以让他们做到这一点，但他们被认为无能为力。 – Fysicus

静态页面上的搜索框

回答

相关问题