jQuery自动完成：进行ajax调用以从自动完成中收集所选项目的更多详细信息

Question

What I am trying to do is once a user selects a result from the autocomplete, an ajax call is made to a php file to collect more details about the selected item and then the details coming within response are displayed in a textarea box.

$(document).ready(function() {
    $("#bookSearch").autocomplete({
        source: "getBooks.php",
        minLength: 3,
        select: function() {
            $.ajax({
                method: "get",
                url: "getBooks2.php"
            })
            .done(function(event, ui){
                $('#bookResults').val(ui.item.value + "\n");
            })
        }
    });
});

This is my javascript at the moment. I get an error

"Cannot read property 'value' of undefined" in reference to "$('#bookResults').val(ui.item.value + "\\n");".

How can I implement the ajax call into the autocomplete function?

<div id="autoComplete">
    <h2 id="searchTitle">Book search</h2>
    <input type="text" id="bookSearch" placeholder="Type in a book name"/>
    <br>
    <textarea rows="10" cols="40" id="bookResults" readonly></textarea>
</div>

Answer 1

Acccording to the documentation , callback function ( done() ) has only one parameter - data. According to this,

.done(function(event, ui) {

should be replaced with

.done(function(ui) {

Answer 2

After some tinkering I have managed to find a solution:

$(document).ready(function() {
    $("#bookSearch").autocomplete({
        source: "getBooks.php",
        minLength: 3,
        select: function(event, ui) {
            $.ajax({
                method: "get",
                url: "getBooks2.php",
                data: {bookTitle: ui.item.value}
            })
                .done(function(data) {
                    $('#bookResults').val(data);
                })
        }
    });
});