jQuery - 自动完成文本框，在选择1项时修改其他文本框

Question

我正在尝试实现一个自动完成功能，该功能从php获取数据集，然后使用它来填充自动完成下拉列表。现在我已经知道了，当用户键入足够的字符以将列表缩小到1个项目时，另外2个文本框中填充了相关信息。

所以基本上，如果我键入足够的字符以将结果缩小到1行，系统就可以工作。但是当我尝试选择文本框下拉列表中列出的项目时，其他两个字段不会更新。

API文档表明我需要使用jquery更改事件，但我不确定如何实现它。我将不胜感激。

这是我的javascript代码。

$( function()   {
    $( "#competency" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "<?php echo base_url()."index.php/Test/search"; ?>",
                dataType: "json",
                data: request,
                success: function(data) {
                    if (data.response == 'true') {
                        response(data.message);
                        if (data.found == 'true') {
                            $( '#competencyDescription' ).val(data.definition);
                            $( '#competencySource' ).val(data.src);
                        }   else    {
                            $( '#competencyDescription' ).val("");
                            $( '#competencySource' ).val("");
                        }
                    }
                }
             });
        }
    });
});

这是我的php

    public function search()    {
    // Trim data typed into text box
    $compName = trim($this->input->get('term', TRUE));
    $this->load->model('Competencies');
    $compController = new Competencies();
    $query = $compController->getCompetenicesByName($compName);
    if ($query->num_rows() == 1)    {
        $data['found'] = 'true';
    }
    if ($query->num_rows() > 0)    {
        $data['response'] = 'true';
        $data['message'] = array();
        foreach ($query->result() as $row)    {
            $data['message'][] = array(
                    'label'=>$row->CompetencyName,
                    'value'=>$row->CompetencyName
            );
            $data['definition'] = $row->CompetencyDefinition;
            $data['src'] = $row->CompetencyDefinitionSource;
        }
    }    else {
        $data['response'] = 'false';
    }
    echo json_encode($data);
}