Question

我有这个代码与jquery它正常工作

<script>
$(document).ready(function(){
        $('.navbar-right li').click(function(e) {
        $('.navbar-right li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        e.preventDefault();
        });
});
</script>

但我需要在jquery-ui中使用自动完成插件，如何将数据中收到的信息附加到以下代码中？

  <script type="text/javascript">
        $.ajax({
                url:   'obtenerPaises',
                type:  'get',
                success:  function (data) {
                    console.log(data);
                }
        });
  </script>

Answer 1

您需要使用jQuery-UI内置功能。您可以在此处阅读更多内容：http://api.jqueryui.com/autocomplete/

$("#tags").autocomplete({
    source: function (request, response) {
        $.getJSON('obtenerPaises', {}, response);
    },
    minLenght: 0,
    select: function (event, ui) {
        //here comes what happens if a user selected an item
    },
    response: function (event, ui) {
        //when server response
    },
    close: function (event, ui) {
        //It is trigger when the menu is closed
    }
});

Answer 2

根据jQuery UI Autocomplete docs，您可以使用GET AJAX请求作为数据源。 JSONP是一种跨域安全的特定于GET的请求类型，它将您的数据对象（在本例中为一个数组）从服务器转换为您的小部件使用的列表。所以它看起来像这样：

$( "#tags" ).autocomplete({
  source: function(request, response) {
      $.ajax({
            url:   'obtenerPaises',
            dataType: 'jsonp',
            success:  function (data) {
                console.log(data);
            }
    });
  }
});

如何使用Ajax和Jquery附加信息

2 个答案: