2

この質問はウェブサイトのプログラミングに関するものです。私の主な言語はc++/ c＃であり、htmlとcssを理解しているということを除いて、Web開発についてはあまり知りません。そのため、私は比較的単純な解決策、できれば箱から出してすぐに使えるものを探しています。私はJavaScriptの経験がありませんが、このプロジェクトのために、必要に応じてJavaScriptを学習したいと思っています。

各エントリが本に関するものであるデータベースがあるとしましょう。タイトル、著者、発行日というフィールドが含まれています。

この動的な結果機能を備えた検索ボックスを備えたシンプルなWebサイトを作成して、数文字入力した後に提案が得られるようにしたいと思います。これらすべての提案と検索結果は、純粋にデータベースに基づいている必要があります。

これは静的なWebサイトであるか、コンテンツ管理システムに基づいている可能性があります。私はJoomlaに精通していますが、それを実行するすぐに使用できるコンポーネントを見つけることができませんでした。これらの検索モジュールはすべてWebサイト全体を検索し、データベースを検索するだけで済みます。

4

1 に答える 1

1

おそらく私はこの機能を実装する方法を手伝うことができます。以前は、この機能をオートコンプリートメニューと呼んでいました。

まず、オートコンプリートメニューに入力する最小文字数を決定します。例2

javascriptを使用して、キーアップイベントを記述します。文字数が最小文字数に達すると。AJAXリクエストをサーバーに送信します。

サーバーはこのリクエストを処理し、データベース検索を実行して、クライアントへのjsonまたはxml応答またはプレーンテキストを形成する必要があります。

クライアントはその応答をJavaScriptオブジェクトに解析し、データを使用してオートコンプリートメニューのダイナミックHTMLを構築し、それをDOMにレンダリングして、検索テキストボックスのすぐ下に表示します。

ここで、入力時にテキストボックス内に最初の結果を表示する場合。これが私がグーグル検索ボックスと同じように提案できる方法です

入力テキストボックスのすぐ下に1つのラベルまたはスパンを配置します。cssを使用して、その位置をテキストボックスの位置と正確に一致させます。入力テキストとラベルの両方のテキストの先頭が一致していることを確認してください。ラベルのテキストの色をテキストのフォントの色よりも明るくします。ラベルのフォントサイズとフォントファミリは、入力テキストフィールドのスタイルと一致する必要があります。次に、Javascriptを使用して、ラベル内の最初または最も一致するテキストを表示します。以下のサンプルコードを見つけてください

 <!DOCTYPE html>
     <head>
       <style>
         label {
           position:relative;
         }
         body, input {
      font-family: 'verdana';
      font-size: 12px;
         }

      </style>
    </head>
    <html>
    <body>

      <form action="demo_form.asp">
        <input type="text" name="fname" placeholder="Matched Text" /><br>
        <label> Matched Text</label><br>
     </form>

   </body>
  </html>
于 2012-11-19T10:00:28.967 に答える