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