asked on

Jquery mobile autocomplete with PHP

I took the example from the Jquery Mobile page:
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/autocomplete-remote.html
But in that case it search the data to a Mysql db with PHP & Json
I tested the Json data (firebug & json lint) and when I type the text it shows the results on firebug but nothing is showing on the results!!!!
Here's my code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jquery-mobile/index.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery-1.9.1.min.js" type="text/javascript"></script>
<link href="themes/synergy.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="css/custom.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
	$.mobile.page.prototype.options.addBackBtn = true;
});
</script>	
<style>
.ui-listview-filter-inset {
    margin-top: 0;
}
</style>
</head> 
<body> 

  
 <!--Page search-->
<div data-role="page" id="searchPage" data-theme="c">
	<div data-role="header" data-position="fixed">
		<img src="images/logo.png"/>
	</div>
   
	<div data-role="content">

	<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="c"></ul>
		
	</div>
		  	
    
	<div data-role="footer" data-position="fixed"  data-id="my-footer">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
		<ul>
        <li><a href="#contactPage" id="about" data-icon="custom" data-theme="c">About</a></li>
        <li><a href="index.html" id="browse" data-icon="custom" data-theme="c">Browse</a></li>
        <li><a href="#eventsPage" id="events" data-icon="custom" data-theme="c">Events</a></li>				
		<li><a href="javascript:void(0)" onclick="window.open('http://issuu.com/guidedsynergy', '_system')"; id="magazine" data-icon="custom"data-theme="c">Magazine</a></li>
        <li><a href="#searchPage" id="search" data-icon="custom" data-theme="c">Search</a></li>	
			
		</ul>
	</div>
		<h4>Copyright</h4>
	</div>
</div>


	<script type="text/javascript">
$( document ).on( "pageinit", "#searchPage", function() {
    $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                url: "services/search.php",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    term: $input.val()
                }
            })
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
                    html += "<li>" + val + "</li>";
                });
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");
            });
        }
    });
});
</script>
</body>
</html>

Here's the PHP:
<?php
header('Content-Type: application/json', true);
include 'config.php';
//connection to the database
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
  or die("Unable to connect to MySQL");


//select a database to work with
$selected = mysql_select_db($dbname,$conn)
  or die("Could not select directory2");
  
  	$search = $_GET['term']; 
	$return = array();
    $query = mysql_query("SELECT business FROM `directory2` WHERE `business` LIKE '%$search%' ORDER BY business ASC") or die('Something went wrong');

    while ($row = mysql_fetch_array($query)) {
    $return[]= $row['business'];
}
echo json_encode($return) ;

?>

Open in new window

Thanks a lot for your help.

Ray Paseur

Can you confirm that the PHP script works, for example, if you access it from the browser?