Solved

JQuery - when click on an autocomplete results send the id to next page

Posted on 2013-10-31
3
650 Views
Last Modified: 2013-10-31
I have this JQuery mobile autocomplete script that is showing business names from a db with PHP.
Is working fine, showing the results, I now want to click on one result and show the field id on the url (so another script will show the business description)
This is what I have:
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 * FROM directory2 WHERE business LIKE '%$search%'OR city LIKE '%$search%' OR description LIKE '%$search%' ORDER BY business ASC") or die('Something went wrong');

    while ($row = mysql_fetch_array($query)) {
    $return[]= $row['business'];
}
echo $_GET["callback"] . "(" . json_encode($return) . ")"; 
?>

Open in new window


THE SCRIPT:

<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: "file.php",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    term: $input.val()
                }, 
            })
			
.then( function ( response ) {
                $.each( response, function ( i, val ) {
                    html += "<li><a href='employeedetails.html?id=" +val['id']+ "'>" + val + "</a></li>";
                });
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");
            });
        }
    });
});
</script>

Open in new window


This is showing on the url ?id=undefined

Thanks for your help.
0
Comment
Question by:acbv
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39614648
replace :
$return[]= $row['business'];
by :
$return[]= array( "id"=>$row['id'] , "value"=>$row['business'] );

and replace :
 html += "<li><a href='employeedetails.html?id=" +val['id']+ "'>" + val + "</a></li>";
by :
 html += "<li><a href='employeedetails.html?id=" +val['id']+ "'>" + val['value'] + "</a></li>"
0
 

Author Comment

by:acbv
ID: 39614875
It worked!! Thanks a lot!!!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39614881
why a "B" grade?
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to count occurrences of each item in an array.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question