CODEWITHSUNDEEP
javascriptphpjqueryinputautocomplete
Abigail Hardin
Abigail Hardin

Reputation: 167

Autocomplete Remote Source Multiple Inputs

I am very new to jQuery. I am using a jQuery autocomplete with remote source. Right now it is printing the second value in a <div>. I don't know how to go about switching it to a new input.

I want the user to type into the text field id="project" and based on the autocomplete have it filled with the 'value' and a new input id="projId" to be filled with 'id'. Any help would be greatly appreciated. Thank you!

The 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>

My php script:

<?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();

?>

The html form: Right now I have <div id="projId"></div> listed just so that it works. When i change this to <input type="text"> it doesn't work, even though I've tried altering the autocomplete script.

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

Thank you!

Upvotes: 1

Views: 395

Answers (1)

camelCase
camelCase

Reputation: 5598

I think I understand the issue: you want the autocomplete data to fill the value of an input as opposed to the div. Something like this should work...let me know.

Adjust to an input like this:

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

And then adjust your function like this:

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

If this works, you could combine the two like $("#projId").value(message).scrollTop( 0 );

UPDATE:

I feel I should also mention a warning about your PHP file and the query to the DB. I suggest using prepared statements to avoid things like SQL injection. It would look something like this (disclaimer...this isn't tested).

/* 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);

Upvotes: 1

Related Questions