Question

I’m not very much into js and programing in general, but I’m very stuck on something that really shouldn’t be too difficult. Feel free to visit the test page:

[REMOVED LINK]

I have three autocomplete fields: Current club, nation and career stats.
Autocomplete works perfectly for the career stats where I can also add fields and the autocomplete also works for the added field.

But for the current club and nation fields, I get results while typing but when I click the correct output it doesn’t show up in the input-field.

I can make it work using other js-libraries, but then it no longer work for the add-button career stats fields.

I use the following libraries:

<script  type="text/javascript" src="js/jquery-1.6.3.js"></script>
<script  type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script  type="text/javascript" src="js/jq-ac-script.js"></script>

The current club html looks like:

<p>
    Current club <label>:</label>
    <input type="text" id="currentclub" />
</p>

In the custom made jq-ac-script.js (I originally found this somewhere online – don’t remember where) the important part is:

$(document).ready(function(){
    $( "#currentclub" ).autocomplete({
        source: "get_club_list.php",
        minLength: 1    
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
       return $( "<li></li>" )
       .data( "item.autocomplete", item )
       .append( item.currentclub )
       .appendTo( ul );
    };
});

The “get_club_list.php” looks like:

<?php
include ("dbsetup.php");

$return_arr = array();
$param = $_GET["term"];

$fetch = mysql_query("SELECT * FROM FootNews_CLUB 
    WHERE clubShortName LIKE '%$param%'");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {

    $row_array['currentclub']           = $row['clubShortName'];
    array_push( $return_arr, $row_array );
}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

Any ideas whereas to why the selected club doesn’t show up when I click it would be appriciated!!

Answer 1

Wow, used my php code. Cool, glad I could help.
http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

Not sure why you are using the autocomplete code with _renderItem in it. I don’t think you need it.

Change the php code to this:

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {

    $row_array['currentclub']  = $row['clubShortName'];
    $row_array['value']   = $row['clubShortName'];
    array_push( $return_arr, $row_array );
}

And, the jquery to:

$( "#currentclub" ).autocomplete({
    source: "get_club_list.php",
    minLength: 1    
});

You can read through my tutorial again but the autocomplete needs a label or value field returned. It then populates the select list and the corresponding input field with that value.

I left in $row_array['currentclub'] = $row['clubShortName']; because I don’t know if you are grabbing that later on. If you are not, you don’t need that line either.

Since you control the returned data and can specify a label and/or value field in the php, I don’t understand why you are using the _renderItem for any of the autocompletes.

BTW, you should add mysql_real_escape_string to your php code for some sql injection protection: http://www.php.net/manual/en/function.mysql-real-escape-string.php