AJAX搜索框改变列表的内容

Question

我无法弄清楚如何利用AJAX驱动的搜索框来改变列表的内容。

所以基本上，梦想是让用户在框中输入查询，并且下面的列表将被更改，以便它包含标题与查询匹配的条目。

下面的屏幕截图可能会有所帮助;

Answer 1

由于您只是在寻找一个起点，请按照这些简单的步骤来理解它。

1. 您需要在php中编写一个代码块（最好是一个函数），它将根据该输入从数据库中列出要列出的项目的输入和查询，以及用户类型。

2. 接下来，您需要遍历从查询中检索到的输出并修改它的结构，如果您需要在php中为它准备HTML并将其作为对浏览器的响应发送。

3. 现在对该php代码块执行ajax调用（请参阅 - http://api.jquery.com/jQuery.ajax/），可能在事件 keypress 上使用jQuery（请参阅 - {{3 }}）。

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.
});