CODEWITHSUNDEEP
phpmysqljquery-uijquery-autocomplete
Sky
Sky

Reputation: 33

jquery-ui-1.8.14 Autocomplete with php and mysql

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

Upvotes: 3

Views: 1338

Answers (1)

jk.
jk.

Reputation: 14435

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

Upvotes: 1

Related Questions