CODEWITHSUNDEEP
jquery-uijquery
noWayhome
noWayhome

Reputation: 668

jQuery UI Autocomplete can't figure it out

I decided to use jQuery UI for my autocomplete opposed to a plugin because I read that the plugins are deprecated. My overall goal is to have an autocomplete search bar that hits my database and returns users suggestions of city/state or zipcodes in a fashion similar to google. As of now I am not even sure that the .autocomplete function is being called. I scratched everything I had and decided to start with the basics. I downloaded the most recent version of jQuery UI from http://jqueryui.com/download and am trying to get the example that they use here http://jqueryui.com/demos/autocomplete/ to work. All the scripts that I have included seem to be connected at least linked through Dreamworks so I am fairly certain that the paths I have included are correct. The CSS and Javascripts that I have included are unaltered straight from the download. Below is my HTML code and my backend PHP code that is returning JSon formated data. Please help me. Maybe I need to include a function that deals with the JSon returned data but I am trying to follow the example although I see that they used a local array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryUI Demo</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" />
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
</script>


<script type="text/javascript">


$(document).ready(function() {
    $("#tags").autocomplete({
        source: "search_me.php"
    });
});
</script>
</head>

<body>
<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
</html>

Below the PHP part.

<?php
include 'fh.inc.db.php';

$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or 
    die ('Unable to connect. Check your connection parameters.');
mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db));

$location = htmlspecialchars(trim($_GET['term'])); //gets the location of the search

$return_arr = array();

if(is_numeric($location)) {

    $query = "SELECT
        zipcode_id
    FROM
        user_zipcode
    WHERE
        zipcode_id REGEXP '^$location'
        ORDER BY zipcode_id DESC LIMIT 10";
    $result = mysql_query($query, $db) or die(mysql_error($db));

    while($row = mysql_fetch_assoc($result)) {

    extract($row);
    $row_array['zipcode_id'] = $zipcode_id;

    array_push($return_arr, $row_array);


    }
}

mysql_close($db);
echo json_encode($return_arr);
?>

Thanks for the ideas. Here is an update.

I checked the xhr using firebug and made sure that it is responding thanks for that tip. also the above php code I hadn't initialized $return_arr so i took care of that. Also thanks for the clarification of the js required or rather not required. Now when I type in a zipcode a little box about a centimeter shows up underneath it but I can't see if anything is in there, I would guess not. I went to my php page and set it up to manually set the variable to "9408" and loaded the php page directly through my browser to see what it returned. This is what it returned. 

[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]

I then went to a JSON code validator at this url http://jsonformatter.curiousconcept.com/ at it informed me that my code is in fact returning JSON formatted data. Anymore suggestions to help me troubleshoot the problem would be terrific.

Wow after more research I stumbled across the answer on someone another post. jquery autocomplete not working with JSON data

Pretty much the JSON returned data must contain Label or Value or both. Switched the zipcode_id to value in my $row_array and... boom goes the dynamite!

Upvotes: 0

Views: 881

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

Your scripts (js files) references are not correct, should only be:

<!-- the jquery library -->    
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<!-- the full compressed and minified jquery UI library -->
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>

The files "jquery.ui.core.js", "jquery.ui.widget.js" and "jquery.ui.position.js" are the separated development files, the jquery ui library is splitted into modules.

The file "jquery-ui-1.8.17.custom.min.js" contains them all, compressed and minified !

Concerning the data source, as stated in the "Overview" section of the Autocomplete documentation: when using a an URL, it must return json data, either of the form of:

  • an simple array of strings: ['string1', 'string2', ...]

  • or an array of objects with label (and a value - optionnal) property [{ label: "My Value 1", Value: "AA" }, ...]

I'm really not familiar with PHP so just make sure your php script returns one of those :-)

Upvotes: 1

Related Questions