Call PHP Script from Auto-complete AJAX JQuery Mobile

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:

Results are not returning from PHP file or I am doing it wrong. Please help me to fix it.
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.

Community · Accepted Answer · 2023-11-17 19:55:19Z

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().

edited Nov 17, 2023 at 19:55

CommunityBot

11 silver badge

answered Aug 6, 2013 at 16:46

Achrome

7,82114 gold badges38 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Azeem Over a year ago

@ashvinmukhija I solved issue#1 with your help. Can you help me out in issue#2 explained in my post? thanks

Azeem Over a year ago

This modification made it possible to show hand cursor while user place mouse on one of value from list but still i need to assign a value to text field when user clicked on selected item: .then( function ( response ) { $.each( response, function ( i, val ) { html += "<li>" + "<a>" + val + "</a>" + "</li>"; }); any suggestion?

Achrome Over a year ago

Answered the second part of your question. Please see the update.

Collectives™ on Stack Overflow

Call PHP Script from Auto-complete AJAX JQuery Mobile

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related