Question

我试图通过遵循jQuery UI文档来使自动完成功能正常工作。这是我第一次尝试这样的事情，所以我不能100％确定这里有什么问题。

JSON：

[
    {
        "plugin_name": "NoSwear"
    },
    {
        "plugin_name": "AaaaahDeath"
    },
    {
        "plugin_name": "aAntiSpam"
    },
    {
        "plugin_name": "Abacus"
    },
    {
        "plugin_name": "abag"
    },
    {
        "plugin_name": "AbandonedCarts"
    },
    {
        "plugin_name": "AbbaRules"
    },
    {
        "plugin_name": "Abilities"
    },
    {
        "plugin_name": "AbilityTrader"
    },
    {
        "plugin_name": "AbitOfRealism"
    }
]

javascript：

$(function() {
    function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    $("#plugins")
        .bind("keydown", function(event) {
            if(event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function(request, response) {
                $.getJSON("bukget_json.php", {
                    term: extractLast(request.term)
                }, response);
            },
            search: function() {
                var term = extractLast(this.value);
                if(term.length < 2) {
                    return false;
                }
            },
            focus: function() {
                return false;
            },
            select: function(event, ui) {
                var terms = split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
});

HTML：

<div class="form-group ui-widget">
<label for="plugins">Plugins</label>
<input type="text" class="form-control" id="plugins" name="plugins" />
</div>

最后，所有这一切的结果是没有显示结果。以下是我所看到的屏幕截图：http://d.pr/i/yh5N。

Answer 1

您可以查看以下内容：jsFiddle.

只需使用$("#plugins").autocomplete而不是绑定和自动完成。

Answer 2

使用此代码...而不是$.ajax，您也可以使用$.get

$( "input.suggest-user" ).autocomplete({
  source: function( request, response ) {

    $.ajax({
        dataType: "json",
        type : 'Get',
        url: 'yourURL',
        success: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image

        response( $.map( data, function(item) {
            // your operation on data
        }));
      },
      error: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  
      }
    });
  },
  minLength: 3,
  open: function() {

  },
  close: function() {

  },
  focus:function(event,ui) {

  },
  select: function( event, ui ) {

  }
});

jQuery UI autocomplete返回带有效json的null值

2 个答案: