0

I'm using jQuery UI's autocomplete and in this case, my results are being displayed in the console as JSON just fine, but no autocomplete menu comes up. Any ideas why?

var cct = $('input[name=csrf_token_name]').val();

$('input[name=search]').autocomplete({
    source: function() {
        $.ajax({
          type: 'POST',
          url: '<?php echo site_url('ajax/getSearchKeywords'); ?>',
          dataType: 'json',
          data: { search:$('input[name=search]').val(), csrf_token_name: cct },
          success: function(data) { console.log(data); },
          error: function(XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown) }
        });
    },
    appendTo: 'section.search',
    minLength: 2,
    delay: 0,
    selectFirst: true
});

Also, when I do start typing after 2 characters, jQuery does create the following element in the DOM:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 101; top: 0px; left: 0px; display: none; "></ul>

The console shows (which changes depending on what I search for):

["0j0sZsOqy0", "z57RuUeVnb", "nF4YFR6pMk"]

And this is my getSearchKeywords function:

public function getSearchKeywords()
{
    header('Cache-Control: no-cache, must-revalidate');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Content-type: application/json');

    echo json_encode($this->tasks->getSearchKeywords($this->input->post('search')));
}
4

1 に答える 1

2

You aren't using the callback function correctly.

Your source function should take 2 arguments - an object containing the term, and a callback function to pass the results into. After you retrieve the terms via ajax, you need to call the callback function.

Something like:

function getTerms(term_obj, callback) {
        $.ajax({
          type: 'POST',
          url: '<?php echo site_url('ajax/getSearchKeywords'); ?>',
          dataType: 'json',
          data: { search:term_obj.term, csrf_token_name: cct },
          success: function(data) { callback(data) },
          error: function(XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown) }
        });


}

Then, pass that function ^^ as the source of your autocompleter.

于 2012-05-01T20:38:17.673 に答える