javascript - 自动完成远程源多个输入

Question

我对 jQuery 很陌生。我正在使用带有远程源的 jQuery 自动完成功能。现在它正在打印 <div> 中的第二个值。 。我不知道如何将其切换到新的 input .

我希望用户在文本字段中输入 id="project"并根据自动完成功能将其填充为 'value'和一个新输入 id="projId"需填写'id' 。任何帮助将不胜感激。谢谢!

jQuery:

<script>
        $(function() {
            function log( message ) {
                $( "<div>" ).text( message ).prependTo( "#projId" );
                $( "#projId" ).scrollTop( 0 );
            }
            $( "#project" ).autocomplete({
                source: "autoComp/projects.php",
                minLength: 2,//search after two characters
                select: function( event, ui ) {
                    log( ui.item ? ui.item.id : "");
                }
            });
        });

    </script>

我的 PHP 脚本:

<?php

$mysql = new mysqli("localhost", "root", "root", "casting2", 3306);

// If the connection didn't work out, there will be a connect_errno property on the $mysql object.  End
// the script with a fancy message.
if ($mysql->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysql->connect_error . ")";
}//connect to your database

$term = $_GET['term'];//retrieve the search term that autocomplete sends
$theQuery = "SELECT proj AS value, projId AS id FROM projects WHERE proj LIKE '%".$term."%'";

$result = $mysql->query($theQuery);

unset($row_set);


// Move to row number $i in the result set.
for ($i = 0; $i < $result->num_rows; $i++) {
    // Move to row number $i in the result set.
    $result->data_seek($i);

    // Get all the columns for the current row as an associative array -- we named it $aRow
    $aRow = $result->fetch_assoc();

    $aRow['value'] = stripslashes($aRow['value']);
    $aRow['id'] = stripslashes($aRow['id']);
    $row_set[] = $aRow; //build an array
}
    echo json_encode($row_set);//format the array into json data

$result->free();

?>

html 形式: 现在我有<div id="projId"></div>列出只是为了让它起作用。当我将其更改为<input type="text">时即使我尝试更改自动完成脚本，它也不起作用。

<form action="ADD/processADDprojCSNEW.php" method="post" onsubmit="return confirm('Do you really want to submit the form?');">

        <label for="project">Project Name:</label>
        <input type="text" id="project" name="project" />

        <label for="projId">ID:</label>
        <div id="projId"></div>
        <br />
        <label for="company">Assign a Casting Company: </label>
        <input id="company" name="company" required>
        <br />
        <label for="compType">Casting Type</label>
        <select id="compType">
            <option value="Principals">Principals</option>
            <option value="Background">Background</option>
        </select>
        <br/>
        <label for="lastEdit">Last Edit:</label>
        <input type="hidden" id="lastEdit" name="lastEdit"
            value="<?php print date("Y-m-d")?>" />

            <br /><br />

        <input type="submit" value ="Submit" />
    </form>

谢谢!

Answer 1

我想我理解这个问题:您希望自动完成数据填充input的value而不是div。像这样的东西应该有效...让我知道。

调整为这样的输入:

<input type="text" name="projId" id="projId">

然后像这样调整你的函数:

function log( message ) {
    $("#projId").val(message);
    $( "#projId" ).scrollTop( 0 );
}

如果这有效，您可以将两者结合起来，例如 $("#projId").value(message).scrollTop( 0 );

更新:

我觉得我还应该提到有关您的 PHP 文件和数据库查询的警告。我建议使用prepared statements以避免诸如 SQL 注入(inject)之类的事情。它看起来像这样(免责声明......这未经测试)。

/* Retrieve the search term that autocomplete sends */
$term = "%{$_GET['term']}%";

/* Create a prepared statement */
$stmt = $mysql->prepare("SELECT proj AS value, projId AS id FROM projects WHERE proj LIKE ?");

/* Bind parameters ("s" for string, and bound with your term from above) */
$stmt->bind_param("s", $term);

/* Execute the query */
$stmt->execute();

/* Pass variable to hold the result */
$stmt->bind_result($value, $id);

/* Loop the results and fetch into an array */
$row_set = array();
while ($stmt->fetch()) {
    $row_set[] = array(
        'value' => $value,
        'id' => $id
    );
}

/* Close */
$stmt->close();

/* Echo the formatted array */
echo json_encode($row_set);