静的ページの検索ボックス

よくある質問を含むページがあります。静的ページの検索ボックス

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

：

アイデアは、私は以下のコードを生成することができましたオンラインヘルプのビットでFont awesome Icons

に示す1の外観&感触を持っている検索ボックスを実装することです：ファイル -

<!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を使用しています

。

このページ（これは単なるテストです）は見た目が&ですが、検索機能がまだ動作していません。

私はここで誰もが、私はそれだけの例のように動作させるために何をすべきかを教えてもらえます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

よくある質問

 <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。これにより、すべてのFAQをビューモデルに入れて、簡単に検索機能を追加することができます。これは、あなたのHTMLを大幅に整理します。特に、あなたのサイトにFAQがますます追加されるようになると、

出典

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

これは私が当初考えていたものでしたが、FAQはCMS内からページ単位で管理されていました。基本的に、私のクライアントは3〜4人のチームで構成されており、CMSの各ページを（サポートされている言語ごとに）開き、そこで直接編集しています。 FAQは、言語ごとに1つの大きな静的ページで提供され、新しいFAQを簡単に追加または削除できます。これは、JSONを編集させたり、小さなWebページを作成して、それができないとみなされるようにすることで解決できますが、 – Fysicus

静的ページの検索ボックス

答えて

関連する問題