靜態頁面上的搜索框

顯示隨着一點點的在線幫助的那個我已經能夠產生以下代碼的外觀&感覺一個搜索框：

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

靜態頁面上的搜索框

回答

相關問題