-2

基本的に、私はphpも知らないし、javascriptも知らないし、データベース言語も知らない

私が知っていること: Actionscript 3.0 HTML CSS 少しの javascript (LITTLE BIT!!!) DATS IT!!!

私は、以下を達成するためにあらゆることを学ぶことに非常にオープンです。

それで、あなたはまさに私の質問であるタイトルを見ました。

基本的に、アイテムのリストがあり、その上に検索バーがあります。

ユーザーがその検索バーに入力したものと同様のリスト項目を入力すると、リストの下に表示され始めます。

他のリスト項目が消え始め、共通のものだけが残ります。

Googleに少し似ていますが、リストにはすでにあるので、ユーザーはスクローラーでリストをナビゲートできますが、単純化するために、検索バーがあり、そのリストに共通のまま入力するときに検索を押したりEnterキーを押したりする必要はありませんそのタイプの珍しいものは消えます。

例えば。プロフィールページに移動したときのFacebook

友達ボタンを押して、

すでに下に表示されているフレンドリストがあります。

そのリストをスクロールして友達を見つけることができます

上部ではなく、友達を検索するという友達パネルにも検索バーがあります。

そこに名前を入力し始めると、入力しているのと似た友達が表示され、残りは消え始めます。

どんな助けでもいいです。また、スクリプト言語でこれが可能になるかどうかはわかりませんが、php全体を学ぶように言われたとしても、それを行うためのチュートリアルを教えていただければ幸いです。学習を開始できるリンクから。

また、私はこれをできるだけ早くクライアントの要件にする必要があります。

-再度、感謝します。

4

3 に答える 3

3

これらのスクリプトは、データソース (通常はデータベースですが、API の場合もあります) に接続し、入力するたびに Ajax を使用してリンクにリクエストを送信することで機能します。私はいくつかのコードを書きますが、あなたは現在それについて研究段階にあると思います!

この機能を備えた開発アプリの 1 つをここで見ることができます: http://firststop.herokuapp.com

必要なものは次のとおりです。

  1. 検索ボックスのある HTML ページが必要です
  2. オートコンプリート アイテムをプルするためのデータ ソースが必要です (ファイルの場合もあります)。
  3. 検索ボックスは、「on」バインド イベントを使用して Javascript 経由でデータ ソースにリンクされます。
  4. Java は、ユーザーが入力するたびに関連オブジェクトでフォームを更新する必要があります

開発者の間では、このタイプの機能は「javascript オートコンプリート」または「Jquery オートコンプリート」と呼ばれています。

この種の機能のトップ チュートリアルの一部を次に示します。

于 2013-10-19T19:25:03.297 に答える
0

これでうまくいくと思います。これを使用して、テーブルに行を表示しました。まず、ページ読み込みですべてのデータをテーブルに読み込む必要があります。その後、検索クエリに一致しない行を非表示にします。ここで、search はテキスト ボックスの ID であり、data-row はテーブル内のデータ行のクラスです。

$('input[name="search"]').keyup(function () {

                   var searchterm = $(this).val();

                   if (searchterm.length > 0) {

                       var match = $('tr.data-row:contains("' + searchterm + '")');

                       var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');

                       match.addClass('selected');

                       match.css("display", "");
                       nomatch.css("display", "none");

                   } else {

                       $('tr.data-row').css("display", "none");

                       $('tr.data-row').removeClass('selected');

                   }

               });
于 2014-04-04T17:26:06.740 に答える