PHP & jQuery - 使用自动完成创建两个不同的文本字段，从数据库中检索到不同的数据列表
Posted
技术标签:
【中文标题】PHP & jQuery - 使用自动完成创建两个不同的文本字段，从数据库中检索到不同的数据列表【英文标题】：PHP & jQuery - Create two different textfields with autocomplete having different lists of data retrieved from the database 【发布时间】：2017-07-06 22:44:21 【问题描述】：Customer textfield with autocomplete from database
我成功地创建了一个带有自动完成功能的客户文本字段，以显示从输入的文本开始的客户。
index.php 用于一个文本字段
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function()
$( "#customer" ).autocomplete(
source: "../phpfiles/search.php",
);
);
</script>
<div class="ui-widget">
<!-- action='./../customer_report_request' -->
<form id="customer_report_request" name="customer_report_request" method="post">
<table>
<tr>
<th colspan='2'>Search Customer</th>
</tr>
<tr>
<td>
<label>Customer: </label>
<input name="customer" id="customer" value='' required>
</td>
<td>
<label>Submit: </label>
<input value="Send" name="send_customer_request" type="submit" id="send_customer_request">
</td>
</tr>
</table>
</form>
</div>
<?php
//Display the list of customer details
if(isset($_POST['send_customer_request']))
include 'db.php'; //connection
$query = "SELECT * FROM customer WHERE Company_Name = '".$_POST['customer']."'";
$customer_result = $db->query($query);
$count_customer = $customer_result->num_rows;
if($count_customer>0)
echo"<div>";
echo "<table>";
echo"<tr>";
echo"<th>Company_Name</th>";
echo"<th>VAT_Registration</th>";
echo"<th>Contact_First_Name</th>";
echo"<th>Contact_Last_Name</th>";
echo"<th>Email</th>";
echo"</tr>";
while ($row = $customer_result->fetch_assoc())
echo"<tr>";
echo"<td>".$row['Company_Name']."</td>";
echo"<td>".$row['VAT_Registration']."</td>";
echo"<td>".$row['Contact_First_Name']."</td>";
echo"<td>".$row['Contact_Last_Name']."</td>";
echo"<td>".$row['Email']."</td>";
echo"</tr>";
echo "</table>";
echo"</div>";
$db->close();
?>
Search.php 用于一个文本字段
<?php
$dbHost = 'localhost';
$dbUsername = 'bobo';
$dbPassword = 'rodnik';
$dbName = 'training';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];
//get matched data from customer table
$query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with
while ($row = $query->fetch_assoc())
$data[] = $row['Company_Name'];
//return json data
echo json_encode($data);
?>
问题是我想使用单个搜索 php 文件来满足其他查询。 例如：
如果在联系人文本字段中输入了一个词，则查询将是 "SELECT * FROM Contact...." 如果在客户文本字段中输入了一个词，查询将是 "SELECT * FROM Customer...."index.php 和 search.php 都被修改来实现这一点。
index.php中的修改部分
定义了一个 jQuery 变量，component_name。 对 index.php 文件的更改，客户 texfield 将使用 POST 方法将变量发送到 search.php 文件，以便它可以被识别并用于查询目的。
联系人文本字段可以是 index.php 文件中的相同格式，也可以是另一个 php 文件中的格式。
<script>
$(function()
$( "#customer" ).autocomplete(
var component_name= "customer";
source: "../phpfiles/search.php",
minLength: 1,
change: function(event, ui)
$.post("../phpfiles/search.php", datapost_data: component_name);
);
);
</script>
修改后的search.php
<?php
$dbHost = 'localhost';
$dbUsername = 'bobo';
$dbPassword = 'rodnik';
$dbName = 'training';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query="";
if($_POST['post_data']=="customer")
$query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with
while ($row = $query->fetch_assoc())
$data[] = $row['Company_Name'];
//return json data
echo json_encode($data);
?>
谁能帮我实现这个目标？
我将这些链接用于 jquery-ui 和 jquery api 部分：
api.jquery.com jqueryui.com【问题讨论】：
欢迎来到 Stack Overflow。您在 index.php 上编辑结果搜索时是否使用它？您呈现它的方式有点令人困惑。我会使用类选择器来选择两个文本字段。然后在您的source 中，您可以确定正在使用哪个字段并根据该字段执行搜索。
【参考方案1】：
这可能是一个有点复杂的广告，希望对您有所帮助。您的示例没有为您的数据库提供任何示例数据或架构，因此我不得不做出一些猜测。你需要调整一下。
考虑如果您有不同的输入字段，您可以：
HTML
<div class="ui-widget">
<form id="customer_report_request" name="customer_report_request" method="post">
<table>
<tr>
<th colspan='2'>Search Customer</th>
</tr>
<tr>
<td>
<label>Customer: </label>
<input class="entry-field" name="customer" id="customer" value='' required>
</td>
<td>
<label>Submit: </label>
<input value="Send" name="send_customer_request" type="submit" id="send_customer_request">
</td>
</tr>
<tr>
<td>
<label>Contact: </label>
<input class="entry-field" name="contact" id="contact" value='' required>
</td>
<td>
<label>Submit: </label>
<input value="Send" name="send_customer_request" type="submit" id="send_ccontact_request">
</td>
</tr>
</table>
</form>
</div>
JavaScript
$(function()
$(".entry-field").autocomplete(
source: function(req, resp)
// determine which field we're working with
var type = $("this").attr("id");
// collect the entry in the field
var term = req.term;
// Prepare our response array
var responses = [];
// PErform POST Request to our Search and accept JSON results
$.ajax(
url: "../phpfiles/search.php",
data:
t: type,
q: term
,
type: "POST",
dataType: "JSON",
success: function(results)
$.each(results, function(key, val)
responses.push(val);
);
); resp(responses);
,
minLength: 1
);
$("#customer_report_request").submit(function(e)
e.preventDefault();
if ($("#customer").val().length)
// perform POST to a PHP search for that specific customer details
else
// performn a post to a PHP search for that specific contact details
// populate result DIV on page with resulting data from POST
);
);
PHP：search.php
<?php
$dbHost = 'localhost';
$dbUsername = 'bobo';
$dbPassword = 'rodnik';
$dbName = 'training';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
// get search query
$searchTerm = $_POST['q'];
// get search type
$searchType = $_POST['t'];
//get matched data from customer table
if($searchType == "customer")
/* create a prepared statement */
$stmt = $mysqli->prepare("SELECT * FROM customer WHERE Company_Name LIKE '?%'");
else
/* create a prepared statement */
$stmt = $mysqli->prepare("SELECT * FROM customer WHERE Contact_Name LIKE '?%'");
/* bind parameters for markers */
$stmt->bind_param("s", $searchTerm);
/* execute query */
$stmt->execute();
/* instead of bind_result: */
$result = $stmt->get_result();
while ($row = $results->fetch_assoc())
if($searchType == "company")
$data[] = $row['Company_Name'];
else
$data[] = $row['Contact_Name']
//return json data
header('Content-Type: application/json');
echo json_encode($data);
?>
所以发生了很多事情。将从您的 PHP 开始。它很容易受到 SQL 注入的攻击，所以我使用 MySQLi Prepare 来保护东西。我们期望将数据发布到此脚本，并且我们期望条件：query 和 type。如果我们没有得到类型，我们可以设置默认值。可能要为query 添加检查，但它应该始终包含 1 个字符。
我们使用source 选项的函数方法将这些数据发送到我们的搜索脚本。查看更多：http://api.jqueryui.com/autocomplete/#option-source
功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调有两个参数：
一个request对象，具有单个term属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入“new yo”，则自动完成term将等于“new yo”。response回调，它需要一个参数：建议给用户的数据。此数据应根据提供的term进行过滤，并且可以采用上述任何简单本地数据的格式。在request期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用response回调。这可确保小部件始终具有正确的状态。
因此，我们可以添加到我们的$.ajax() 调用并使用error 回调。基本上，我们最终将一个空数组发送回response。
所以我们向 PHP 发送一个搜索词，我们返回 JSON 数组数据，我们将其通过管道传送到我们自己的数组中发送回response，用户将获得一个结果列表。
它仍然有点笨拙，如果你的用户习惯了，那也没关系。您可以对其进行精简并对结果进行分类。这样您就可以拥有一个搜索字段。此外，一旦选择了某些内容或更改了字段，您就可以再次使用 AJAX 从另一个 PHP 中提取这些详细信息，该 PHP 从数据库中收集所有数据。这将导致不必等待页面再次加载等。
我希望这能回答您的问题，我怀疑它也会提出更多问题。继续搜索，有很多答案。有时，将一个大问题分解为更小的单个问题比解决整体问题更容易。
【讨论】：
以上是关于PHP & jQuery - 使用自动完成创建两个不同的文本字段，从数据库中检索到不同的数据列表的主要内容，如果未能解决你的问题，请参考以下文章