从自动完成的AJAX JQuery Mobile调用PHP脚本

Question

I have following auto-complete code to call PHP file via AJAX and get the results in JSON form:

$( "#autocomplete_customer" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 0 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: "SearchCustomer.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");
        });
    }
});

Here is SearchCustomer.php file:

<?php
include "config.php";

mysql_select_db($db, $con);
$search = $_GET['term'];    
$result = mysql_query("my SELECT query on basis of $search") or die('Something went wrong');
$json = '[';
    $first = true;
    while ($row = mysql_fetch_assoc($result))
    {
        if (!$first) { $json .=  ','; } else { $first = false; }
        $json .= ".$row['cli_razon_social'].";
    }
    $json .= ']';
    echo $json;
?>

I am facing two issues:

1. Results are not returning from PHP file or I am doing it wrong. Please help me to fix it.

2. Currently user cannot select a value from auto-complete list. How can I modify this script to let user select auto-complete value from text field auto-complete ul list?

Thanks.

Answer 1

You need to prepare a json object to send from your PHP file.

Take a look at json_encode() .

Ideally, you would prepare an associative array and then convert it to a JSON

For example

$arr = array();
$arr['name'] = 'PHP';
echo json_encode($arr);

Output

{
    'name' : 'PHP'
}

You can then refer to the name in your JS as

.then(function(resp) { console.log(resp.name); }

This will output PHP in the console.

However, you might be better off using jQuery UI's built in Autocomplete. Please refer to this post .

Moreover, your code is vulnerable to SQL injections. You should switch to Prepared Statements to avoid this.

UPDATE :

As for your second issue, you can first assign a class to the list items, eg <li class="autocomp-data"> and then bind a click handler to it.

$ul.html( html );
$('.autocomp-data').click(function() {
    $('correct-selector').val($(this).text());
});

Please note that depending on where you want to assign the text, you might need to use either .val() or .html() .