Home JQuery Autocomplete: make ajax call to collect more details of the selected item from autocomplete
Reply: 1

JQuery Autocomplete: make ajax call to collect more details of the selected item from autocomplete

entio
1#
entio Published in 2017-12-07 17:31:40Z

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>
entio
2#
entio Reply to 2017-12-07 17:57:20Z

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) {
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.477846 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO