Get a value from autocomplete

JavaScript
1

Hi,

I am using the following jquery and PHP to populate an autocomplete. I will add a btnShowDetails and I woudl like to let the btnShowDetails read the value of the autocomplete (which is the company_guid? How can I do this please.

jquey for autocomplete:


$("input#txtCompanyName").autocomplete
    (
        {
            source : function (request, callback)
            {
                var data = { term : request.term };
                $.ajax
                (
                    {
                        url : "../autocomplete_company.php",
                        data : data,
                        search  : function(){$(this).addClass('working');},
                        open    : function(){$(this).removeClass('working');},
                        complete : function (xhr, result)
                        {
                            if (result !== "success") return;
                            var response = xhr.responseText;
                            var autocomplete_result = [];
                            $(response).filter ("li").each (function ()
                            { autocomplete_result.push ($(this).text ());
                        }
                    );
                    callback (autocomplete_result);
                }
            }
            );
        }
    });

and it’s reading from this autocomplete_company.php:


<?php
    include('includes/php_header.php');
    include($_SESSION["absolute_path"] . '/includes/connect2db.php');

    $autocomplete_term = utf8_decode($_REQUEST["term"]);

    $mysql_command = "CALL sp_autocomplete_company(:param_company)";
    $mysql_query = $mysql_connection->prepare($mysql_command);
    $mysql_query->bindParam(':param_company', $autocomplete_term, PDO::PARAM_STR);
    $mysql_query->execute();

    while($mysql_row = $mysql_query->fetch())
    {
        echo ("<li>" . utf8_encode($mysql_row['company_name']) . "</li>");
    }
?>

and here I want to read the autocomplete value:


$('#btnShowDetails').click(function(){
    $.ajax({
        url : "get_company_details.php",
        data : 'id=HERE I WANT TO READ THE VALUE OF THE AUTOCOMPLETE',
        type : "post",
        success : function(data)
        {
            here I am displaying the result
        }
    });
});
2

Hi jrahma,

Set a select function in your autocomplete options that sets a variable with the chosen value, which you can then reference from your button click handler:

(function(){

    var companyId = null;

    $("input#txtCompanyName").autocomplete({
        source : function (request, callback){
           // ...
        },
        select: function( event, ui ) {
            companyId = ui.item.id;
        }
    });

    $('#btnShowDetails').click(function(){
        $.ajax({
            url : "get_company_details.php",
            data : { id: companyId },  // pull in value here
            type : "post",
            success : function(data) {
                // ..
            }
        });
    });

})();

Although this won’t work with your current code, as I notice your PHP is returning HTML rather than JSON, and it contains the company name but not an ID to use in the button callback. Is this PHP script used elsewhere in your application? If not, it would make more sense to return an array of JSON objects containing the company ID and name.