自动完成远程源多输入

时间:2015-11-18 21:12:18

标签: javascript php jquery input autocomplete

我是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>

谢谢!

1 个答案:

答案 0 :(得分:1)

我想我理解了这个问题:您希望自动填充数据填充value的{​​{1}}而不是input。这样的事情应该有用......让我知道。

调整为这样的输入:

div

然后像这样调整你的功能:

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

如果这样可行,您可以将两者合并为function log( message ) { $("#projId").val(message); $( "#projId" ).scrollTop( 0 ); }

更新:

我觉得我还应该提一下关于你的$("#projId").value(message).scrollTop( 0 );文件和对DB的查询的警告。我建议使用prepared statements来避免像SQL注入这样的事情。它看起来像这样(免责声明......这没有经过测试)。

PHP