使jQuery UI自动完成源依赖于另一个自动完成

问题描述

问题出在标题上，我不知道如何使自动完成窗口小部件相互依赖.在我的示例中，数据库中有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自动完成源依赖于另一个自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！