...

View Full Version : Finding the id of a jquery autocomplete input from within the onItemSelect call



codingForumsFTW
11-18-2009, 07:46 PM
i have this,



$(function() {
$('#input').autocomplete('test.php', {json: true});
});


that bring back values from the database here is my php section



$result = mysqli_query($db,$query);

while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}

$return = array();

foreach ($aResults as $key => $res) {
$return[] =$res['value'] . ' , ' . $res['info'];

}


echo json_encode($return);



}
}
}


i would like, when i select a name from the auto suggest to be able to have the id be filled in a input text area...

uncle Google says this, but i am having a hard time implementing it.



myCallback = function(li, $input) {
// I need to refer to the appropriate "myXxxInput" here
alert($input.attr('id'));
}

setup = function() {
setupInput($('#myFirstInput'));
setupInput($('#mySecondInput'));
}

function setupInput($input) {
$input.autocomplete('blah.php', {onItemSelect: function(li) {
myCallback(li, $input);} });
}

Fumigator
11-19-2009, 05:51 PM
I would use the result function of this plugin.

http://docs.jquery.com/Plugins/Autocomplete/result#handler

codingForumsFTW
11-19-2009, 05:56 PM
how would i implement that into




$(function() {
$('#input').autocomplete('test.php', {json: true});
});

Fumigator
11-19-2009, 06:10 PM
If you look at the source code on the plugin's demo site:

http://view.jquery.com/trunk/plugins/autocomplete/demo/

Find the id #singleBirdRemote. It is using this result function. You should get a good idea of how to use it based on that code.

codingForumsFTW
11-19-2009, 06:19 PM
k i will look at that

codingForumsFTW
11-19-2009, 06:47 PM
exactly what i want! but still cant get it to work :-(


KILL ME

Fumigator
11-19-2009, 08:56 PM
Well make sure you don't post any code, that would be too helpful for us who might be able to help :p

codingForumsFTW
11-20-2009, 12:09 AM
ok i know its bad! please bare with me.
i know it the php, its returning 0 , 1 (from the drop down, if i have 2 results)
and in the hidden input i get "Array" when selected.

firebug i get response

GET http://

0|array
1|array


A MESS I TELL, A MESS!!


$result = mysqli_query($db,$query);

while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}

foreach ($aResults as $key=>$value) {

echo "$key|$value\n";
}
}
}
}



here is the javascript



<script type="text/javascript">
$().ready(function() {

function log(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}

function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}


$("#singleBirdRemote").autocomplete("test.php", {
width: 260,
selectFirst: false
});

$("#singleBirdRemote").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});


});
</script>


HTML



<p>
<label>Single Bird (remote):</label>
<input type="text" id="singleBirdRemote" />
<input type="button" value="Get Value" />
</p>
<p>
<label>Hidden input</label>
<input />
</p>

Fumigator
11-20-2009, 06:02 PM
Is that PHP code what populates the selectbox? There is a problem with that code-- you are adding elements to array $aResults, each element is an array. So you are 2 arrays deep, so you need to refer to an element in the 2nd array when generating the output. Something like:



foreach ($aResults as $key=>$value) {
echo "$key|{$value['id']}\n";
}

codingForumsFTW
11-20-2009, 06:24 PM
just parse errors.
Parse error: parse error, expecting `T_STRING' or `T_VARIABLE' or `T_NUM_STRING'

can we take one step back? just really lost. my php code is just a mess!

this is the php from the demo, i took out most of the result so its easier to see.




<?php
$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
"Great <em>Bittern</em>"=>"Botaurus stellaris",
"Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
"Little Bittern"=>"Ixobrychus minutus",
"Black-crowned Night Heron"=>"Nycticorax nycticorax"
);

foreach ($items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
echo "$key|$value\n";
}
}

?>



this is my php (not running very well at all)
how do i convert this to what is needed.


<?php
$aResults = array();
$db = mysqli_connect("", "", "", "") or die(mysqli_connect_error());
if(!$db) {
// Show error if we cannot connect.
echo "ERROR: Could not connect to the database.";
} else {
if(isset($_GET['q'])) {
$queryString = $db->real_escape_string($_GET['q']);
if(strlen($queryString) >0) {



$query = "SELECT s_id,s_last,s_first FROM table_student WHERE s_last LIKE '".$queryString."%'"." GROUP BY s_last,s_first LIMIT 20;";


$result = mysqli_query($db,$query);

while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}
foreach ($aResults as $key=>$value) {
echo "$key|$value['id']\n";
}
}
}
}

Fumigator
11-20-2009, 06:38 PM
Sorry I forgot to enclose that variable in squigglies {}. I edited my code above so it should work.

codingForumsFTW
11-20-2009, 06:52 PM
now it is returning

i type a it drops down 0 click on it you get 20 in the hidden text area

0|20 firebug says this

Fumigator
11-20-2009, 09:18 PM
Alright! Looks like it's working! :thumbsup:

Now you just need to change it to echo the value from the database you want to put in the hidden input instead of the id.

codingForumsFTW
11-20-2009, 09:34 PM
well thats the problem

0|20

the 20 is the id of the database row


which is fine... the 0 is where need the last name to come in on...

Fumigator
11-20-2009, 09:41 PM
That's easy to change. Look at the echo statement that creates the 0|20. The "0" is the $key of the top-level array. You just want to replace that with the value in the database you need. Something like $row['columnName'].

codingForumsFTW
11-20-2009, 09:58 PM
im so lost don't understand this...




foreach ($aResults as $key=>$value) {
echo "{$row['s_last']} |{$value['id']}\n";


gives me this

|20




foreach ($aResults as $key=>$value) {
echo "$key{$row['s_last']} |{$value['id']}\n";
}


gives me this
0 |20


totally stupid question i know

Fumigator
11-20-2009, 10:44 PM
Hey no worries, we all get lost occasionally. It's how you learn! :thumbsup::D

And it's partially my fault, because my previous message suggested you look at $row, but that's wrong in this situation.

Check out how a foreach() loop works. You loop through an array using substitute variables for the key and value of each element in the array. You are referring to the $row array, inside that foreach(), but you should be looking at the substitute variable $value, which is actually an array itself. That's why using $value['id'] is working. Bottom line, try $value['s_last'].

And for more enlightenment, because we're all here to learn:

http://us3.php.net/manual/en/language.types.array.php
http://us3.php.net/manual/en/control-structures.foreach.php

codingForumsFTW
11-20-2009, 10:51 PM
Thank you! This works perfectly!



foreach ($aResults as $key=>$value) {
echo "{$value['info']}, {$value['value']}|{$value['id']}\n";

codingForumsFTW
11-20-2009, 11:41 PM
ok i have auto complete that i want to be able to select a column of the database before searching on it
i just want to pass the oneone variable over to the php page.

so i have this javascript



<script type="text/javascript">
$().ready(function() {

function log(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}

$("#search").autocomplete("test.php", {
width: 260,
selectFirst: false
});
$("#search").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});


$(":text, textarea").result(log).next().click(function() {
$(this).prev().search(); // shows resluts
});

});


</script>


the html



<p class="field" > <select id="oneone" name="oneone" style="width:100px;margin:5px 0 5px 0;" value="">
<option value="s_last">Last Name</option>
<option value="s_first">First Name</option>

<label>Search</label>
<input type="text" id="search" />
</p>
<p>
<label>Hidden input</label>
<input type="text" id="inputit" />



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum