0

我正在使用 jQuery UI 的自动完成功能，在这种情况下，我的结果在控制台中显示为 JSON 就好了，但没有出现自动完成菜单。任何想法为什么？

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
});

此外，当我在 2 个字符后开始输入时，jQuery 确实在 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>

控制台显示（根据我搜索的内容而变化）：

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

这是我的 getSearchKeywords 函数：

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

您没有正确使用回调函数。

您的源函数应该有 2 个参数 - 一个包含术语的对象和一个将结果传递到的回调函数。通过ajax检索词条后，需要调用回调函数。

就像是：

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) }
        });


}

然后，将该函数 ^^ 作为自动完成器的来源传递。

于 2012-05-01T20:38:17.673 回答