jquery-ui-1.8.14 Autocomplete with php and mysql

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

jk. · Accepted Answer · 2011-09-17 00:25:59Z

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

edited Sep 17, 2011 at 0:25

answered Sep 17, 2011 at 0:09

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sky Over a year ago

Thank you so much!!! That fixed it, and thanks also for the link back to your tutorial.

Collectives™ on Stack Overflow

jquery-ui-1.8.14 Autocomplete with php and mysql

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related