使jQuery UI自动完成源依赖于另一个自动完成 [英] Make jQuery UI autocomplete source dependent on another autocomplete
问题描述
问题出在标题上,我不知道如何使自动完成窗口小部件相互依赖.在我的示例中,数据库中有2列:
The problem is in the title, I don't know how to make an autocomplete widget dependent on the other. In my example, I have 2 columns in my database:
- 名字
- 姓氏
还有一些行:
Dupont Francois
Dupont Oliver
Lapeche Jean
如果在第一个自动完成输入中输入Dupont
,我希望第二个自动完成建议Oliver
和Francois
,而不是
If I enter Dupont
in the first autocomplete input, I want the second autocomplete to suggest Oliver
and Francois
, not Jean
!
这是我的代码HTML:
This is my code HTML :
<form action="../../controler/add/addUserDevice.php" onsubmit="return verifUserDevice(this)" method="post">
<table>
<tr>
<td>Last Name</td>
<td><input type="text" class="userLastName" name="userLastName"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" class="userFirstName" name="userFirstName" /</td>
</tr>
<tr>
<td colspan="3"><input class="buttonIndex" type="submit" value="Create" /></td>
</tr>
</table>
我的第二次自动完成的PHP代码
And my PHP code for the seconde autocomplete
<?php
include('../../model/connexion_sql.php');
if ((include_once '../../model/connexion_sql.php') === FALSE)
exit('erreur include');
if (isset($_GET['term'])) {
$connection = new Connection;
$connection->connection();
$conn = $connection->getConnection();
$requete = $conn->prepare('SELECT userFirstName FROM user WHERE userFirstName LIKE :term');
$requete->execute(array('term' => $_GET['term'] . '%'));
$array = array();
while ($donnee = $requete->fetch()) {
$array[] = $donnee['userFirstName'];
}
echo json_encode($array);
}
?>
和我的JavaScript:
and my JavaScript:
$(function(){
$(".userFirstName").autocomplete({
source: '../../model/autocomplete/userFirstName.php',
minLength: 1
});
});
推荐答案
$(function() {
$(".userFirstName").autocomplete({
autoFocus:true,
source: function( request, response ) {
$.ajax({
url: '../../model/autocomplete/userFirstName.php?userLastName=' + $("#userLastName").val() + "&term=" + request.term,
dataType: "json",
success: function( data ) {
response(data);
}
});
},
minLength: 1
});
});
您的ajax请求将如下所示.
Your ajax request will look like that.
将id="userLastName"
添加到您的userLastName输入中.
Add id="userLastName"
to your userLastName input.
将其添加到您的PHP脚本中
Add this in your PHP script
if($_GET['userLastName']) {
$userLastName = $_GET['userLastName'];
} else $userLastName = null;
然后更改
SELECT userFirstName FROM user
WHERE userFirstName LIKE :term
BY
SELECT userFirstName FROM user
WHERE userFirstName LIKE :term
AND (userLastName = :userLastName OR :userLastName is null)
这篇关于使jQuery UI自动完成源依赖于另一个自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!