jquery - リストの内容を変更するAJAX検索ボックス

Question

AJAXを利用した検索ボックスを使用してリストの内容を変更する方法がわかりませんでした。

したがって、基本的には、ユーザーがボックスにクエリを入力することを夢見ています。下のリストは、タイトルがクエリと一致するエントリが含まれるように変更されます。

以下のスクリーンショットが役立つ場合があります。

Answer 1

あなたは出発点を探しているだけなので、それを理解するためにこれらの簡単なステップに従ってください。

1. phpでコードブロック（できれば関数）を記述して、入力としてどのユーザーが入力するかを取得し、その入力に基づいてデータベースからリストされるアイテムをクエリする必要があります。

2. 次に、クエリから取得した出力をループし、その構造を変更する必要があります。または、phpでHTMLを準備し、ブラウザへの応答として送信する必要があります。

3. 次に、そのphpコードブロックに対してajax呼び出し（これを参照-http: //api.jquery.com/jQuery.ajax/ ）を実行し、イベントキープレスでjQueryを使用している可能性があります（これを参照-http://api.jquery .com / keypress /）。

4. 次に、古いリストを新しく受信したデータに置き換えます。

それはあなたのワークフローがどうあるべきかという考えについてです。これらすべてのコードを貼り付けると、答えが非常に長くなります。つまり、ワークフローだけです。

PHP（ajaxcall.php）：

<?php 

 //The following code block will be executed on the ajax call.


//get the user input from post
$user_input = $_POST['user_input'];

//do the query based on that.
//YOUR SQL HERE

//parse the retrieved result and loop through it.

//echo out the output.

die();

JS：

$('.somefield').keypress(function(){
    //get the current value of some field and set this as the data to be sent.
    //do your ajax call.
    //on success( after successfully getting the data ), replace the content of
    //the list with the new data.
});